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 remplir un tableau à partir d'un formulaire. On prévoit deux zones de texte et des boutons radio pour entrer les informations. On veut ques les deux zones de texte aient une bordure rouge tant que la valeur n'est pas valide et verte ensuite et qu'elles soient à saisie obligatoire. On veut aussi un message en cas de soumission avec des champs non valides (mais avec un navigateur qui gère bien le HTML 5 ça ne devrait pas arriver) :

<div ng-app ng-controller="Controleur">
	<style type="text/css">	
		.ng-invalid { border-color: #B94A48; }
		.ng-valid { border-color: #468847; }
	</style>
    <h1>Ajout d'utilisateurs</h1>
    <form name="ajoutUtilisateur"ng-submit="soumission(ajoutUtilisateur.$valid)">
		<div class="form-group">
			<label for="nom">Nom :</label>
			<input type="text" class="form-control" id="nom" placeholder="Entrez le nom" ng-model="user.nom" required>
		</div>
		<div class="form-group">
			<label for="prenom">Prénom :</label>
			<input type="text" class="form-control" id="prenom" placeholder="Entrez le prénom" ng-model="user.prenom" required>
		</div>
		<div class="form-group">
			<label>Rôle : </label>
			<label class="radio-inline">
				<input type="radio" id="actif" value="Actif" ng-model="user.role"> Actif
			</label>
			<label class="radio-inline">
				<input type="radio" id="membre" value="Membre" ng-model="user.role"> Membre
			</label>
		</div>
		<div class="alert alert-danger" ng-show="message">{{message}}</div>
		<button class="btn btn-default" type="submit">Ajouter</button>
    </form>
	<table class="table table-bordered">
		<caption>Utilisateurs</caption>
		<tr>
			<th>Nom</th>
			<th>Prénom</th>
			<th>Rôle</th>
		</tr>
		<tr ng-repeat="utilisateur in utilisateurs">
			<td>{{utilisateur.nom | uppercase}}</td>
			<td>{{utilisateur.prenom}}</td>
			<td>{{utilisateur.role}}</td>
		</tr>
	</table>
	<script>
		function Controleur($scope) {
			$scope.message = '';
			$scope.utilisateurs = [];
			$scope.user = {nom: '', prenom: '', role:'Membre'};
			$scope.soumission = function (valid) {
				if(valid) {
					$scope.utilisateurs.push($scope.user);
					$scope.user = {nom: '', prenom: '', role:'Membre'};
				}
				else {
					$scope.messageClass ='alert-danger';
					$scope.message = 'Désolé mais il y a des données non valides !';
				}
			};
		}
	</script>
</div>

Ajout d'utilisateurs

{{message}}
Utilisateurs
Nom Prénom Rôle
{{utilisateur.nom | uppercase}} {{utilisateur.prenom}} {{utilisateur.role}}

Vous avez peut-être remarqué que ça ne sert à rien de prévoir un bouton radio checked étant donné qu'avec la liaison de données c'est le scope qui gère tout. Il faut donc judicieusement le renseigner.


Retour à l'accueil...