AngularJS je m'y mets !

Un petit TP

On va faire un nouveau point de ce qu'on a vu avec un exercice un peu plus ambitieux. Le but est de réaliser des filtrages et des recherches dans un tableau de personnes. On va reprendre le tableau utilisé précédemment pour cet exercice en codant ces fonctionnalités :

Voici tout ça en action :

<div ng-app="monApplication">
    <div ng-controller="Controleur">
		<table class="table table-bordered">
			<caption>Liste des personnes</caption>
			<tr>
				<th><a href="" ng-click="champ = 'nom'; inverse=!inverse">Nom</a></th>
				<th><a href="" ng-click="champ = 'prenom'; inverse=!inverse">Prénom</a></th>
				<th><a href="" ng-click="champ = 'age'; inverse=!inverse">Age</a></th>
				<th><a href="" ng-click="champ = 'sexe'; inverse=!inverse">Sexe</a></th>
			</tr>
			<tr ng-repeat="personne in personnes | orderBy:champ:inverse | filter:recherche | filter:sexes | Age:age">
				<td>{{ personne.nom }}</td>
				<td>{{ personne.prenom }}</td>
				<td>{{ personne.age }}  ans</td>
				<td>{{ personne.sexe }}</td>
			</tr>
		</table>
		<div class="panel panel-default">
			<div class="panel-heading">Recherche</div>
				<div class="panel-body">
				<div class="radio">
				  <label>
				    <input type="radio" name="optionsRadios" value="nom" ng-model="colonne">
				    Par nom
				  </label>
				</div>
				<div class="radio">
				  <label>
				    <input type="radio" name="optionsRadios" value="age" ng-model="colonne">
				    Par âge
				  </label>
				</div>
				<div class="form-group">
					<label for="nom">Entrez un {{champ}} :</label>
					<input type="text" class="form-control" id="nom" placeholder="Entrez un {{colonne}} ici" ng-model="recherche[colonne]">
				</div>
				<button type="button" class="btn btn-default" ng-click="resetRecherche()">Reset</button>
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">Filtrage</div>
				<div class="panel-body">
				<div class="form-group">
					<label for="age">Entrez un âge limite :</label>
					<input type="text" class="form-control" id="age" placeholder="Entrez un âge limite ici" ng-model="age">
				</div>
				<select ng-model="sexes.sexe">
					<option value="">-- Filtrer le sexe --</option>
					<option value="M">Que les hommes</option>
					<option value="F">Que les femmes</option>
				</select>
			</div>
		</div>
    </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;
		    	$scope.champ = 'nom';
		    	$scope.inverse = false;
		    	$scope.recherche = {};
		    	$scope.colonne = 'nom';
		    	$scope.age = 70;
		    	$scope.resetRecherche = function() {
		    		$scope.recherche = {};
		    	};
	    	}
		]);
    </script>
</div>
Liste des personnes
Nom Prénom Age Sexe
{{ personne.nom }} {{ personne.prenom }} {{ personne.age }} ans {{ personne.sexe }}
Recherche
Filtrage

Ne regardez pas trop vite ma solution !


Retour à l'accueil...