Angular filter - Part 1

Aujourd’hui, nous commençons une série d’articles sur AngularJS, sur lequel nous vous proposons une formation.

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.

Article publié sur le blog de Cédric