Comment filtrer une liste avec AngularJS

Publié le 6 Février 2015

Voyons comment utiliser un peu de magie avec angularJS en réalisant le filtrage d'une liste en temps réel.

Je dis "magie" car il suffit de peu de code pour développer cette fonctionnalité.

Tout d'abord partons d'une liste toute simple en HTML:

<ul>
   <li>Banane: Jaune</li>
   <li>Pomme: Rouge</li>
   <li>Prune: Vert<li>
   <li>Framboise: Rose<li>
   <li>Fraise: Rouge</li>
</ul>

Maintenant mettons un peu d'angular pour générer la liste:

angular.module('demoListe', [])
   .controller('listeController', function () {
      // la liste des fruits qu'on souhaite afficher
      this.fruits = [{
          nom: 'banane',
          couleur: 'jaune'
        },{
          nom: 'pomme',
          couleur: 'rouge'
        },{
          nom: 'prune',
          couleur: 'vert'
        },{
          nom: 'framboise',
          couleur: 'rose'
        },{
          nom: 'fraise',
          couleur:'rouge'
      }];
   });

et le HTML devient

<ul ng-controller="listeController as ctrl">
   <li ng-repeat="fruit in ctrl.fruits">{{fruit.nom}}: {{fruit.couleur}}</li>
</ul>

Bien sûr il faut ajouter un input text pour saisir le texte pour filtrer la liste:

<div ng-controller="listeController as ctrl">
   <input type="text" ng-model="filtre">
   <ul>
      <li ng-repeat="fruit in ctrl.fruits | filter: {'$': filtre}">
         {{fruit.nom}}: {{fruit.couleur}}
     </li>
   </ul>
</div>

Et comme on a utilisé $ dans le filtre le filtrage prend en compte tous les champs donc nom et couleur. On peut chercher tous les fruit 'rouge' ou tous ceux commençant par p.

Le tout en à peine 10 lignes de codes. Magique!

Rédigé par Bliz

Repost 0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article