AngularJS : les filtres

Le filtre est une fonctionnalité bien pratique qui va faciliter l’affichage de données. Pour commencer il y a les filtres de formatages qui vont permettre d’afficher une date ou un nombre selon un pattern donné. Les filtres utilisent la syntaxe | (« pipe ») bien connue de tous ceux qui utilisent des commandes shell :

Ou encore simplement des transformations de chaînes de caractères :

Et ll est possible d’enchainer les filtres.

Mais un filtre permet aussi de modifier le DOM ainsi le filtre orderBy facilite le tri de tableau en le combinant à la directive ng-repeat. Notez qu’il est possible de passer des paramètres tel que pour orderBy 2 paramètres sont proposés permettant de passer un prédicat et le sens de tri. Le 2-way-databinding permet d’activer le filtre dynamiquement.

Autre exemple intéressant avec le filtre filter permettant de réduire un tableau de donnée en s’appuyant sur un critère. Ce qui, avec le 2-way data binding, offre un affichage dynamique bien pratique pour améliorer l’expérience utilisateur :

Bien sûr vous pouvez créer vos propres filtres. La syntaxe est similaire aux directives, controleurs et services.
Dans l’exemple suivant le filtre permet de capitaliser une chaîne de caractères.

Cet outil puissant est encore un élèment de plus en terme de lisibilité. Simple à mettre en oeuvre il donne la possibilité d’imaginer des implémentations complexes. Ci-dessous un exemple d’enchainement de 2 filtres sur une répétition pour paginer un tableau :