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 :

[jsfiddle url= »http://jsfiddle.net/sebmade/DLX9u/ » height= »100px » include= »html,result,js »]

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

[jsfiddle url= »http://jsfiddle.net/sebmade/KHmeq/ » height= »100px » include= »html,result,js »]

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.
[jsfiddle url= »http://jsfiddle.net/sebmade/ruGPv/ » height= »200px » include= »result,html,js »]

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 :
[jsfiddle url= »http://jsfiddle.net/sebmade/7fkGj/ » height= »200px » include= »result,html,js »]

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.
[jsfiddle url= »http://jsfiddle.net/sebmade/qfMFs/ » height= »200px » include= »js,result,html »]

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 :
[jsfiddle url= »http://jsfiddle.net/xncuF/ » height= »200px » include= »js,result,html »]