Angular filter – Part 1

L’une des fonctionalités les plus appréciables et méconnues d’Angular réside dans les filtres disponibles. Dans toutes applications web, il est courant de devoir filtrer ou réordonner une collection pour l’afficher. Les filtres Angular sont applicables à la fois en HTML ou en Javascript, à un seul élément ou un tableau. En HTML, la syntaxe se rapproche du style Unix, où l’on peut chaîner les commandes à l’aide du pipe. Par exemple, on peut appliquer un filtre nommé ‘uppercase’ sur une expression de la façon suivante :

   {{ expression | uppercase }}

On peut également chaîner plusieurs appels de filtre :

    {{ expression | uppercase | trim }}

Certains filtres prennent des paramètres : c’est le cas du filtre ‘number’, qui nécessite de préciser le nombre de chiffres suivant la virgule. Pour passer les paramètres au filtre, il suffir de procéder comme suit :

    {{ expression | number:2 | currency:'$'}}

Il est également possible d’invoquer les filtres depuis le code Javascript :

    $filter('uppercase')

Angular va alors retrouver la fonction de filtre correspondant à la chaîne de caractères passée en paramètre.

Angular propose par défaut certains filtres communs :

– number : permet de préciser le nombre de chiffres après la virgule à afficher (arrondi au plus proche).

    {{ 87.67 | number:1 }} // 87.7 
    {{ 87.67 | number:3 }} // 87.670

– currency : permet de préciser la monnaie.

    {{ 87.67 | currency:'$' }} // $87.67

– date : permet de formatter l’affichage des dates, en précisant un pattern. On retrouve l’écriture classique de pattern :

    {{ today | date:'yyyy-MM-dd' }} // 2013-06-25

Un certain nombre de patterns sont disponibles (avec un rendu différent selon la locale) :

    {{ today | date:'longDate' }} // June 25, 2013

– lowercase/uppercase : de façon assez évidente, ces filtres vont convertir l’expression en majuscules ou minuscules.

    {{ "Cedric" | uppercase }} // CEDRIC   
    {{ "Cedric" | lowercase }} // cedric

– json : moins connu, ce filtre permet d’afficher l’objet au format JSON. Il est également moins utile, car, par défaut, afficher un object avec la notation ‘{{ }}’ convertit l’objet en JSON.

    {{ person | json }} // { name: 'Cedric', company: 'Ninja Squad'} 
    {{ person }} // { name: 'Cedric', company: 'Ninja Squad'} 

– limitTo : ce filtre s’applique quant à lui à un tableau, en créant un nouveau tableau ne contenant que le nombre d’éléments passés en paramètre. Selon le signe de l’argument, les éléments sont retenus depuis le début ou la fin du tableau.

    {{ ['a','b','c'] | limitTo:2 }} // ['a','b'] 
    {{ ['a','b','c'] | limitTo:-2 }} // ['b','c'] 

– orderBy : là encore un filtre s’appliquant à un tableau. Celui-ci va trier le tableau selon le prédicat passé en paramètre. Le prédicat peut être une chaîne de caractères représentant une propriété des objets à trier ou une fonction. Le prédicat sera appliqué sur chaque élément du tableau pour donner un résultat, puis le tableau de ces résultats sera trié selon les opérateur ‘. Une propriété peut être précédée du signe ‘-‘ pour indiquer que le tri doit être inversé. A la place d’un simple prédicat, il est possible de passer un tableau de propriétés ou de fonctions (chaque propriété ou fonction supplémentaire servant à affiner le tri primaire). Un second paramètre, booléen, permet quant à lui d’indiquer si le tri doit être inversé.

    var jb = {name: 'JB', gender: 'male'};    
    var cyril = {name: 'Cyril', gender: 'male'};     
    var agnes = {name: 'Agnes', gender: 'female'};     
    var cedric = {name: 'cedric', gender: 'male'};     
    $scope.ninjas = [jb, cyril, agnes, cedric];  
    
    // order by the property 'gender' 
    {{ ninjas | orderBy:'gender'}} // Agnes,JB,Cyril,Cédric 

    // order by a function (lowercase last) 
    $scope.lowercaseLast = function(elem){ 
      return elem.name === elem.name.toLowerCase() 
    }; 
    {{ ninjas | orderBy:lowercaseLast }} // Agnes,JB,Cyril,cedric 

    // order by an array of properties or functions 
    {{ ninjas | orderBy:['-gender','name'] }} // cedric,Cyril,JB,Agnes 

Dans le prochain billet, nous verrons comment créer nos propres filtres.

À propos de Cédric Exbrayat

Cédric Exbrayat, développeur et fondateur Ninja Squad, se réunit avec ses semblables régulièrement que ce soit au Lyon JUG ou à Mix-it, dont il est le fondateur. Java et JS for food and fun.

Publié le 28/06/2013, dans Getting started, et tagué , . Bookmarquez ce permalien. 2 Commentaires.

  1. Félicitation et merci pour vos articles.
    Je débute dans le développement (reconversion suite à un accident de la route…)
    Auriez vous une idée par rapport aux filtres : j’utilise Fancybox, avec des liens vers des images…., lorsque je filtre avec les filtres d’Angular, lorsque la liste est filtrée, les liens fonctionnent, dès que l’on efface le contenu du filtre, les éléments filtrés se réaffichent, par contre, les liens ne fonctionnement plus.
    Si vous aviez un conseil, je l’accepterais volontier.
    Cordialement
    Eric POVEDA

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :