码迷,mamicode.com
首页 > 其他好文 > 详细

ng-class的用法

时间:2016-08-01 15:41:05      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:

最近在学习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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!