Les filtres sur Angular.js /
adapter, trier, changer des valeurs simplement

04/03/2016

Angular nous permet de filtrer une {{expression}} de manière simple et performante. Les filtres permettent d’adapter de trier des éléments dans notre vue. Encore de super pouvoir que nous offre angular.

Exemple d’utilisation de filtre avec Angular

Exemple d’un filtre currency

Exemple, en reprenant notre dernier exemple nous aimerions peut être mieux afficher les prix de produits. Angular à un filtre pour ca, le filtre currency, il formate notre prix.

<div  ng-controller="StoreController as store">
  <div ng-repeat="product in store.products">
    <h1> {{product.name}}</h1>
    <h2> {{product.price | currency}}</h2>
  </div>
</div>

Angular utilise toujours le même procédé sur les filtres


{{data | filter:options }}

date: un filtre timestamp vers date


{{data | filter:options }} {{18289393949030303 | date:"MM/dd/yyyy @ h:mma" }} // retourne la date et l'heure

uppercase & lowercase


{{ 'Une chaine ' | uppercase }} // retourne : UNE CHAINE

limitTo: un filtre pour limiter un nombre de caractère

{{ "Ma Chaine de caractère" | limitTo: 4 }} // retourne Ma ch

Mentions particulières pour ce filtre qui nous permet de limiter le nombre d’item affichés depuis un array. Exemple avec nos produits


<li ng-repeat="product in store.products | limitTo:3">

oderBy: un filtre pour trier

Ce filtre nous permet de trier notre boucle ng-repeat, ce qui est vraiment super utile !


<li ng-repeat="product in store.products | orderBy:'-price' ">

Dans notre exemple nous trions par prix. Le « – » devant price indique que nous voulons obtenir les prix du plus petit au plus grand, sans le moins cela sera de plus cher au moins cher.

En reprenant notre exemple du magasin, cela donnerait donc :


<div ng-controller="StoreController as store"> <div ng-repeat="product in store.products | orderBy:'price'"> <h1> {{product.name}}</h1> <h2> {{product.price}}</h2> <p> {{product.description}} </p> </div> </div>