ng-class 学习笔记

文章参考

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

<div>
    <!-- scope变量绑定 : 直接使用变量设置class -->
    <div class="oneClass {{myred}}">
        class="{{myred}}"
    </div>

    <!-- 字符串数组形式是针对class简单变化，具有排斥性的变化，true是什么class，false是什么class -->
    <div ng-class="{true: 'active', false: 'inactive'}[isActive]">
        ng-class="{true: 'active', false: 'inactive'}[isActive]"
    </div>

    <!-- 对象key/value处理； 如果isSelected为true,则显示selected样式 -->
    <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(){
			// 使用字符串显示class的样式
			$scope.myred="myred";

			//字符串数组形式。
			$scope.isActive = false;

			// 对象key/value处理
			$scope.isSelected = true;
			$scope.isCar = false;
		};
		$scope.init();
}]);