AngularJS je m'y mets !

Classes

La directive ngClass permet de déclarer de façon dynamique des classes pour des éléments HTML. Il suffit d'utliser une liaison pour la valeur de la classe en utilisant une expression. Voici un exemple qui utilise Twitter Bootstrap :

<div ng-app ng-controller="Controleur">
	<div class="btn-group">
	  <button type="button" class="btn btn-danger" ng-click="voirDanger()">Danger</button>
	  <button type="button" class="btn btn-warning" ng-click="voirWarning()">Alerte</button>
	  <button type="button" class="btn btn-info" ng-click="voirInfo()">Information</button>
	</div>
	<div class="alert" ng-class="maClasse">{{message}}</div>
	<script>
		function Controleur($scope) {
			$scope.voirDanger = function() {
				$scope.message = 'On est en danger !';
				$scope.maClasse='alert-danger';
			};
			$scope.voirWarning = function() {
				$scope.message = 'Ce n\'est qu\'une alerte.';
				$scope.maClasse='alert-warning';
			};
			$scope.voirInfo = function() {
				$scope.message = 'Une petite information.';
				$scope.maClasse='alert-info';
			};
		}
	</script>
</div>
{{message}}

J'ai prévu deux propriétés pour le scope : message qui contient le message à afficher et maClasse qui contient la classe à utiliser pour le message. Le tout est géré par un simple contrôleur qui comporte 3 méthodes, une pour chacun des aspects désirés. Les messages sont déclenchés par des boutons avec la directive ngClick.

Précédent

Retour à l'accueil...