AngularJS

Filtre

Les filtres servent, entre autres, à afficher dans une liste uniquement les éléments qui contiennent le contenu d'un champ texte.
Ou alors de trier les éléments d'une liste comme nous l'avons fait sur la page précédente...

Filtrer une liste en fonction d'un champ texte

Imaginons que nous avons sur notre site une liste incroyablement longue (une liste de mail pour une messagerie par exemple), angularJS permet de filtrer cette liste simplement avec le contenu d'un champ texte.

Pour ce faire, nous allons créer une liste avec le ng-repeat et la filtrer avec l'attribut filter comprenant le ng-model du champ.

  1. <input type="search" ng-model="filtre">
  2. <ul>
  3. <li ng-repeat="element in tableau | filter : filtre">{{element}}</li>
  4. </ul>

Limiter le nombre de caractère affiché

Imaginons maintenant que nous souhaitons donner un avant goût d'un article en affichant uniquement les 150 premiers caractères et ensuite un lien en savoir plus.

Rien de plus simple avec le filtre limitTo

  1. <p>
  2. {{article | limitTo: 150}}... <a href="#">En savoir plus</a>
  3. </p>

Créer ses propres filtres

Il est possible de créer vos propres filtres de la même manière que l'on crée un controller.

  1. angular.module('myApp').filter('lowerThan',function(){
  2. return function(input, max) {
  3. var tableauAffiche = [];
  4. input.forEach(function(chiffre){
  5. if(chiffre < max){tableauAffiche.push(chiffre);}
  6. });
  7. return tableauAffiche;
  8. }
  9. }]);

Ce filtre lowerThan permet d'afficher uniquement les éléments d'un tableau en dessous d'une valeur max.
Pour utiliser ce filtre, nous allons boucler sur un tableau initialisé dans le controller et lui donner comme paramètre le contenu d'un champ number.

  1. <input type="number" ng-model="max">
  2. <ul>
  3. <li ng-repeat="chiffre in chiffres | lowerThan : max">{{chiffre}}</li>
  4. </ul>

Même si la création d'un filtre est assez simple, n'hésitez pas à aller voir si le filtre que vous souhaitez utiliser n'est pas disponible sur gitHub. Vous gagnerez un temps fou !

A savoir

Vous pouvez très bien mettre plusieurs filtres sur un élément (pour tout mettre en majuscule et trier par ordre alphabétique) de la manière suivante :

  1. {{data | filtre1 : expression1 : expression2 | filtre2}}

Exemples

Filtrer une liste en fonction d'un champ texte

  • zèbre
  • éléphant
  • singe
  • abeille
  • ours

Afficher les 150 premiers caractères d'un article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis augue tincidunt, laoreet nulla et, aliquam risus. Aliquam erat volutpat. Quisque...
En savoir plus


Utilisation du filtre lowerThan

  • 1
  • 10
  • 12
  • 24
  • 52
  • 64