AngularJS je m'y mets !

Un petit TP

On va faire un nouveau point de ce qu'on a vu avec un petit exercice. Le but est de construire encore un tableau mais cette fois de personnes avec leur nom et leur âge. On prévoit deux zones de texte pour entrer les informations. On veut que le tableau s'actualise à mesure :

<div ng-app ng-controller="Controleur">
        <form ng-submit="ajouter(nom, age)">
		Nom : <input type="text" name="nom" ng-model="nom">
		Age : <input type="number" name="age" ng-model="age">
		<br>
		<button type="submit">Ajouter</button>
	</form>
	<table>
		<caption>Personnes</caption>
		<tr>
			<th>Nom</th>
			<th>Age</th>
		</tr>
		<tr ng-repeat="personne in personnes">
			<td>{{personne.nom}}</td>
			<td>{{personne.age}}</td>
		</tr>
	</table>
	<script>
		function Controleur($scope) {
			$scope.personnes = new Array();
			$scope.ajouter = function(nom, age) {
				$scope.personnes.push({'nom': nom, 'age': age});
			};
		}
	</script>
</div>
Nom : Age :
Personnes
Nom Age
{{personne.nom}} {{personne.age}}

La seule difficulté réside dans le fait que cette fois la méthode du contrôleur comporte des paramètres. La déclaration ngSubmit permet d'intercepter la soumission du formulaire et de l'orienter sur la méthode du contrôleur. Nous n'avons rien prévu dans notre code concernant la validité des données saisies, si ce n'est de préciser le type des zones, en particulier number pour l'âge. Si vous regardez le code généré vous allez trouver de nouvelles classes :

Nom : <input class="ng-valid ng-dirty" name="nom" ng-model="nom" type="text">
Age : <input class="ng-dirty ng-invalid ng-valid-number" name="age" ng-model="age" type="number">

Ce sont : ng-valid, ng-dirty et ng-valid-number. Ce sont des classes de travail d'AngularJS. On se rend compte qu'elles ont à voir avec la validation des données. Entrez autre chose qu'un nombre pour l'âge et vous verrez que la valeur ne s'inscrit pas dans le tableau. La classe ng-valid-number se transforme alors en ng-invalid-number. Tout ça est géré par le contrôleur de formulaire d'AngularJS.


Retour à l'accueil...