ng-class用法小记

标签：

angularJS为我们提供了3种方案处理class：

　　1：scope变量绑定（不推荐使用）；//controller涉及了classname,作者希望的是controller是一个干净的纯javascript意义的object。
　　2：字符串数组形式；(针对class简单变化，具有排斥性的变化)
　　3：对象key/value处理;(主要针对复杂的class混合)

代码如下：

　　a:function name($scope){

　　　　$scope.test="className";　　

　　}

　　<div class="{{test}}"></div>

　　b:function name($scope){

　　　　$scope.isActive=true;

　　}

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

　　c:function name($scope){

　　}

　　<div ng-class="{‘selected‘:isSelected,‘car‘:isCar}"></div>//当 isSelected = true 则增加selected class，当isCar=true,则增加car class，所以你结果可能是4种组合。

　　在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素（html/css），在controller需要一个简单的POJO（plain object javascript object），与view完全的隔离（交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量，其值为class name，形如方法a。

　　参考链接http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html

---恢复内容结束---

angularJS为我们提供了3种方案处理class：
　　1：scope变量绑定（不推荐使用）；//controller涉及了classname,作者希望的是controller是一个干净的纯javascript意义的object。
　　2：字符串数组形式；(针对class简单变化，具有排斥性的变化)
　　3：对象key/value处理;(主要针对复杂的class混合)

代码如下：

　　a:function name($scope){

　　　　$scope.test="className";　　

　　}

　　<div class="{{test}}"></div>

　　b:function name($scope){

　　　　$scope.isActive=true;

　　}

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

　　c:function name($scope){

　　}

　　<div ng-class="{‘selected‘:isSelected,‘car‘:isCar}"></div>//当 isSelected = true 则增加selected class，当isCar=true,则增加car class，所以你结果可能是4种组合。

　　在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素（html/css），在controller需要一个简单的POJO（plain object javascript object），与view完全的隔离（交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量，其值为class name，形如方法a。

　　参考链接http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html

ng-class用法小记

标签：

原文地址：http://www.cnblogs.com/xtping/p/5076368.html