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>
