AngularJS je m'y mets !

Filtres

On peut déjà faire en sorte d'avoir les noms dans l'ordre alphabétique, ou l'inverse, avec un simple filtre orderBy :

<div ng-app="monApplication">
    <div ng-controller="Controleur">
		<table class="table table-bordered">
			<tr>
				<th>Nom</th>
				<th>Prénom</th>
				<th>Age</th>
				<th>Sexe</th>
			</tr>
			<tr ng-repeat="personne in personnes | orderBy:'nom'">
				<td>{{ personne.nom }}</td>
				<td>{{ personne.prenom }}</td>
				<td>{{ personne.age }}  ans</td>
				<td>{{ personne.sexe }}</td>
			</tr>
		</table>
		<table class="table table-bordered">
			<caption>Noms dans l'ordre alphabétique inversé</caption>
			<tr>
				<th>Nom</th>
				<th>Prénom</th>
				<th>Age</th>
				<th>Sexe</th>
			</tr>
			<tr ng-repeat="personne in personnes | orderBy:'nom':true">
				<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', []);
	    monModule.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;
	    });
	    monModule.controller('Controleur', ['$scope', 'Personnes', 
		    function ($scope, Personnes) {
		    	$scope.personnes = Personnes;
	    	}
		]);
    </script>
</div>
Noms dans l'ordre alphabétique
Nom Prénom Age Sexe
{{ personne.nom }} {{ personne.prenom }} {{ personne.age }} ans {{ personne.sexe }}
Noms dans l'ordre alphabétique inversé
Nom Prénom Age Sexe
{{ personne.nom }} {{ personne.prenom }} {{ personne.age }} ans {{ personne.sexe }}

Il suffit de faire suivre le filtre orderBy par le nom du champ. Un second paramètre booléen inverse l'ordre s'il est vrai.

Précédent Suivant

Retour à l'accueil...