1) Dans un premier temps il faut définir l'utilisation de App
angular.module('App', []).
2) N'oubliez pas d'appeller votre application dans la balise <html>
<html ng-app="App">
3) Ensuite il faut créer notre controller avec :
controller('FilterController', [filterFilter', function(filterFilter){}]);
4) N'oubliez pas d'appeller votre application dans la balise <html>
<html ng-app="App">
5) Une fois cela fait on a plus qu'à remplir entre nos accolades notre controller d'un tableau fictif car trier du vide c'est difficile !
this.array = [
{name: 'Tobias'},
{name: 'Jeff'},
{name: 'Brian'},
{name: 'Igor'},
{name: 'James'},
{name: 'Brad'}
];
6) Pour opérer le filtre, rajoutez avant la fermeture du controller."a" étant le paramètre passé pour le filtre des données.
this.filteredArray = filterFilter(this.array, 'a');
7) Ensuite il nous faut afficher nos données. Pour cela dans votre code html, il faudra "appeler" les variables :
<span class="hilight" ng-repeat="entry in ctrl.array">{{entry.name}} | <span>
Affichons maintenant la liste avec le filtre ! Le filtre réagira comme si nous avions entré un "a" dans un input de recherche.
<span class="hilight" ng-repeat="entry in ctrl.filteredArray">{{entry.name}} | <span>
Utilisez "ng-repeat" pour afficher toutes les données du tableau à la suite. Le span en question se répétera aussi longtemps qu'il y aura des données. J'ai délibérément rajouté une classe CSS pour donner un peu de couleur à notre liste.
Le concept là est de passer entry in ctrl.array dans notre ng-repeat, c'est à dire de lui dire "Okay, on crée une variable qu'on appelle entry pour chaque entrée de notre tableau". Souvenez vous de notre :
ng-controller="FilterController as ctrl"en haut de notre html, il se comporte comme un alias : on appelle notre controller "ctrl" et faire un ctrl.array cible le tableau de note controller.
Je vous invite à vous référer à la documentation d'AngularJs pour vous entrainer.