AngularJS je m'y mets !

Filtres

On a déjà vu l'utilisation de filtres tout prêts dans des expressions. On peut aussi filtrer les éléments d'un tableau. Voici une application qui va nous servir de base qui affiche le contenu d'un tableau Javascript dans un tableau HTML :

<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">
				<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 }}

Un module qui présente un service qui se résume à un tableau de personnes. Un contrôleur qui utilise ce service et renseigne le scope. La directive ngRepeat est utilisée pour remplir un tableau avec les données des personnes.

Suivant

Retour à l'accueil...