AngularJS je m'y mets !

Directive ngModel (suite)

On vient de voir que la directive ngModel peut s'appliquer aussi à un contrôle select. Voyons un autre exemple, cette fois nous allons utiliser une expression pour changer une classe :

<div ng-app>
	<div class="form-group">
		<label for="texte">Choisissez la classe :</label>
		<select class="form-control" ng-model="classe" ng-init="classe='btn-default'">
			<option>btn-default</option>
			<option>btn-primary</option>
			<option>btn-success</option>
			<option>btn-info</option>
			<option>btn-warning</option>
			<option>btn-danger</option>
		</select>
	</div>
    <button type="button" class="btn {{classe}}">Je suis un bouton avec la classe "{{classe}}"</button>
</div>

On a une liste avec des noms de classes de Twitter Bootstrap. La directive ngModel établit une liaison entre la valeur sélectionnée et la classe appliquée au bouton. La valeur initiale de la liste est fixée grâce à la directive ngInit.

Précédent

Retour à l'accueil...