AngularJS: la direttiva ng-class

AngularJS dispone di una direttiva specifica per associare dinamicamente le classi CSS ad un elemento.

La direttiva ng-class assegna una classe CSS in base al risultato dell'espressione booleana usata:

<div ng-controller="TestCtrl">
  <div ng-class="{success: value > 5}" ng-if="value > 5">
    You won!
  </div>
  <p><button type="button" ng-click="calculate()">Play</button></p>
  <p>Number is: {{ value }}</p>
</div>

Il codice JavaScript:

var app = angular.module('MyApp', []);

app.controller('TestCtrl', ['$scope', function($scope) {
	$scope.value = 0;
	$scope.calculate = function() {
		$scope.value = 0;
		$scope.value = Math.floor((Math.random()*10)+1);	
	};
}]);