ng-class study notes

Article reference

http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html

 

<div>
    <!-- scope variable binding: directly use the variable to set the class -->
    <div class="oneClass {{myred}}">
        class="{{myred}}"
    </div>

    <!-- The form of string array is for simple changes of class, with exclusive changes, what class is true, and what class is false -->
    <div ng-class="{true: 'active', false: 'inactive'}[isActive]">
        ng-class="{true: 'active', false: 'inactive'}[isActive]"
    </div>

    <!-- Object key/value processing; if isSelected is true, the selected style is displayed -->
    <div ng-class="{'selected': isSelected, 'car': isCar}">
        ng-class="{'selected': isSelected, 'car': isCar}"
    </div>
</div>

 

 

angular.module("com.hb.app")
	.controller("testController", ["$scope" ,function($scope) {
		$scope.init = function(){
			// use a string to display the style of the class
			$scope.myred="myred";

			// String array form.
			$scope.isActive = false;

			// object key/value processing
			$scope.isSelected = true;
			$scope.isCar = false;
		};
		$scope.init();
}]);