AngularJS je m'y mets !

Filtres

On peut aussi créer un filtre personnalisé. Imaginons qu'on veuille filtrer notre liste de personnes en fonction de leur âge. Il n'y a pas de filtre préétabli qui nous permet de réaliser cela. On va donc en créer un dans notre application :

<div ng-app="monApplication">
    <div ng-controller="Controleur">
		<table class="table table-bordered">
			<caption>Personnes filtrées pour un âge supérieur à 40 ans</caption>
			<tr>
				<th>Nom</th>
				<th>Prénom</th>
				<th>Age</th>
				<th>Sexe</th>
			</tr>
			<tr ng-repeat="personne in personnes | Age:40">
				<td>{{ personne.nom }}</td>
				<td>{{ personne.prenom }}</td>
				<td>{{ personne.age }}  ans</td>
				<td>{{ personne.sexe }}</td>
			</tr>
		</table>
    </div>
	<script>
		var monModule = angular.module('monApplication', []).
		factory('Personnes', function() { 
			var Personnes = [
				{ nom:'Dupont', prenom:'Albert', age:25, sexe:'M' },
				{ nom:'Durand', prenom:'Leon', age:40, sexe:'M' },
				{ nom:'Saulvit', prenom:'Paul', age:50, sexe:'M' },
				{ nom:'Ragout', prenom:'Martine', age:42, sexe:'F' },
				{ nom:'Bernard', prenom:'Valérie', age:27, sexe:'F' },
				{ nom:'Tolout', prenom:'Jacques', age:63, sexe:'M' },
			];
			return Personnes;
			}).
		filter('Age', function () {
			return function (items, age) {
				var out = [];
				angular.forEach(items, function (item) {
				    if(item.age > age) out.push(item);
				});
				return out;
			}
		}).
		controller('Controleur', ['$scope', 'Personnes',
			function ($scope, Personnes) {
				$scope.personnes = Personnes;
			}
		]);
	</script>
</div>
Personnes filtrées pour un âge supérieur à 40 ans
Nom Prénom Age Sexe
{{ personne.nom }} {{ personne.prenom }} {{ personne.age }} ans {{ personne.sexe }}

Il faut utiliser la méthode filter du module pour créer le filtre. On nomme le filtre, ici Age, puis on crée une fonction. Celle-ci doit avoir pour valeur de retour une autre fonction qui est celle qui va effectivement réaliser le filtrage. Cette fonction reçoit les données comme premier paramètre. Le second paramètre est celui qui correspond au paramètre du filtre, ici une valeur que j'ai fixée à 40. Le code du filtre est tout simple, la seule particularité est qu'il utilise une méthode spécifique d'AngularJS forEach. Cette méthode permet d'itérer facilement dans un tableau ou un objet.

Précédent

Retour à l'accueil...