Les filtres Angular JS

angularjs_logo

Les filtres Angular ne sont que peu utilisés et pourtant, ils permettent un traitement assez puissant en un nombre minimal de lignes de code.

Découvrons cela !

Qu'est ce que c'est ?

Les filtres sont des modules Angular. Ils permettent de transformer une donnée pour l'afficher différemment mais ne modifient pas la donnée d'origine.

Si je pars d'une liste de personnes et que je souhaite filtrer sur les personnes dont le nom commence par un A alors à l'affichage je n'aurais que ces personnes mais ma liste d'origine n'aura pas été modifiée (pas de perte de données).

L'utilisation est la suivante :

{{expression | filtre : paramètre 1 : paramètre 2 ....}}

Filtres existants

Angular fournit un certain nombre de filtres déjà prêts à être utilisés, voici quelques exemples :

  • Le filtre date
<div ng-init="today = Date.now();">
	<label>Aujourd'hui</label>
	<label>Sans format : </label> {{today}}
	<label>Format dd/MM/yyyy : </label> {{today | date: 'dd/MM/yyyy'}} 
	<label>Format yyyy-MM-dd : </label> {{today | date: 'yyyy-MM-dd'}} 
</div>
<!-- Affiche : Aujourd'hui Sans format : 1465995977961 Format dd/MM/yyyy : 15/06/2016 Format yyyy-MM-dd : 2016-06-15 -->

 

  • Le filtre filter
<div ng-init="people = [{nom:'ab'}, {nom:'ca'}, {nom:'bc'}]">
	<label>Liste des éléments dont l'attribut nom contient un a (non case sensitive) : </label>
	<div ng-repeat="p in people | filter:{nom:'A'}">
		{{p.nom}}
	</div>
</div>
<!-- Affiche : ab et ca mais cache bc -->

 

  • Le filtre orderby
<div ng-init="people = [{nom:'a', age:10}, {nom:'b', age:5}, {nom:'c', age:7}]">
	<label>Age croissant : </label>
	<div ng-repeat="p in people | orderBy:'age'">
		{{p.nom}} - {{p.age}}
	</div>
					
	<label>Age décroissant : </label>
	<div ng-repeat="p in people | orderBy:'-age'">
		{{p.nom}} - {{p.age}}
	</div>
</div>
<!-- Affiche : Age croissant : b - 5    c - 7    a - 10 -->
<!-- Affiche : Age décroissant : a - 10    c - 7    b - 5 -->

 

  • Les filtres uppercase/lowercase
<div ng-init="people = [{nom:'a', age:10}, {nom:'B', age:5}, {nom:'c', age:7}]">
	<label>Uppercase</label>
	<div ng-repeat="p in people">
		{{p.nom | uppercase}}
	</div>
					
	<label>Lowercase : </label>
	<div ng-repeat="p in people">
		{{p.nom | lowercase}}
	</div>
</div>
<!-- Affiche : Uppercase : A  B  C -->
<!-- Affiche : Lowercase : a  b  c -->

 

Créer ses propres filtres

Angular donne également la possibilité de faire nos propres filtres en fonction des besoins métiers.

Voici le squelette d'un filtre custom :

angular.module('monFilter', []).filter('monFilter', [
	function() {
		return function(items, id) {

			//Si id est null ou vide ou undefined : aucun filtre
				return items;
			
            // Sinon
			return items.filter(function(item) {
                // Si ma condition de filtre est vrai
				     return true;
				// Sinon
				     return false;
			});

		};
	}
]);

L'appel du filtre se fera de cette façon :

{{maListe | monFilter:idServantDeFiltre}}

 

Filtres en cascade

Les filtres peuvent se chaîner les uns derrière les autres. Par exemple si je veux filtrer ET trier une liste, je peux le faire de cette façon :

<div ng-init="people = [{nom:'ab', age:7}, {nom:'ca', age:5}, {nom:'bc', age:10}]">
	<label>Liste des éléments dont l'attribut nom contient un a (non case sensitive) : </label>
	<div ng-repeat="p in people | filter:{nom:'A'} | orderBy:'age'">
		{{p.nom}} - {{p.age}}
	</div>
</div>
<!-- Affiche : ca - 5 et ab - 7 mais cache bc - 10 -->

 

Conclusion

En conclusion, ces filtres peuvent s'avérer réellement utiles pour l'affichage des listes ou des dates.

Regardez si un filtre n'existe pas déjà, pour retravailler l'affichage de votre donnée, vous permettra de vous affranchir d'un certain nombre de lignes de code inutiles.

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.