AngularJS的ngclass的用法

在angular中为我们提供了3种方案处理class：

1.scope变量绑定（不推荐使用）

controller代码

javascriptfunction ctr($scope){
   $scope.test =“classname”;
}

html代码

html<div class=”{{test}}”></div>

这种方法是没错的,但是它又angular提供变量来改变class的方法有点诡异至少我认为controller应该是纯净的数据和行为

2.字符串数组形式

javascriptfunction Ctr($scope) { 
    $scope.isActive = true;
}

html<div ng-class="{true: 'active', false: 'inactive'}[isActive]">
</div>

isActive表达式为true，则 active，否则inactive。

3.对象key/value处理
主要针对复杂的class混合

javascriptfunction Ctr($scope) { 
    $scope.isSelected = true;
    $scope.isCar = false;
}

html<div ng-class {'selected': isSelected, 'car': isCar}">
</div> 

当 isSelected = true 则增加selected class，
当isCar=true,则增加car class，
所以你结果可能是4种组合。

个人推荐用2，3两种方式，不建议将class放入controller scope之上，scope需要保持纯洁，scope上的只能是数据和行为。

文章原创链接 : http://www.devh.net/u/yidongnan/blog/how-to-user-ngclass-in-angularjs