ng-class的用法

标签：

最近在学习angular框架，ng-class是angular框架的一个指令，这里是ng-class指令的官方解释：

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

ng-class 指令的值可以是字符串，对象，或一个数组。

如果是字符串，多个类名使用空格分隔。

如果是对象，需要使用 key-value 对，key 是一个布尔值，value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。

如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

在angular中有三种处理class的方式：
1：scope变量绑定。
2：字符串数组形式。
3：对象key/value处理。

例1：（scope变量绑定形式）

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

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

这种方式不推荐使用。

例2：（字符串数组形式）

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

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

这段代码的意思就是当isActive的值为True时，则动态绑定的class为active，为flase时，动态绑定的类为inactive,当需要绑定多个类名时可以用空格隔开。

例3：（对象key/value处理）

需要使用 key-value 对，key 是一个布尔值，value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。

function Ctr($scope) { 

}

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

其实这和数组字符串方式类似，当isSelected为true时，动态绑定select类，当isCar为true时动态绑定car类。

ng-class的用法

标签：

原文地址：http://www.cnblogs.com/pengshuo/p/5725721.html