AngularJS je m'y mets !

Filtres

On peut aussi filtrer les enregistrements avec le filtre filter :

<div ng-app="monApplication">
    <div ng-controller="Controleur">
		<div class="form-group">
			<label for="nom">Entrez un nom :</label>
			<input type="text" class="form-control" id="nom" placeholder="Entrez un nom ici" ng-model="recherche.nom">
		</div>
		<div class="form-group">
			<label for="nom">Entrez un mot pour la recherche sur tous les champs :</label>
			<input type="text" class="form-control" id="nom" placeholder="Entrez un mot ici" ng-model="recherche.$">
		</div>
		<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 | filter:recherche">
				<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>
Nom Prénom Age Sexe
{{ personne.nom }} {{ personne.prenom }} {{ personne.age }} ans {{ personne.sexe }}

Il suffit de faire suivre le filtre filter par une variable du scope reliée à un contrôle de texte. On peut préciser le champ sur lequel doit se porter le filtre comme je l'ai fait pour le premier contrôle ci-dessus.

Précédent Suivant

Retour à l'accueil...