angularjs学习笔记--ng-class的三种使用方法

在使用原生js时，动态的控制样式的思路就是更换class，而在angularjs中ng-class指令使这一操作变得十分简单。

1.通过双向数据绑定

demo1

js:

fonction changeClass () {
    $scope.className = "change";
}

html:
<div ng-class="{{className}}" ></div>

css:
.change {
    color:#f00;
}

这种方式虽然不推荐使用，但是语法上是没有任何问题的，因为在controller中，我们一般写的都是js代码，与控制样式分离开来，而且这样也必然要触发一些改变样式的代码。

例如：某个值为真显示样式1，为假显示样式2，就得在controller里做一些判断，这样做的缺点就是让代码的层次关系不清晰。

2.字符串真假
当某个功能是根据真假显示两种不同的样式，这种方法最方便了。

demo2

js :
function changeClass () {
    $scope.className = true; //或false
}

html :
<div ng-class="{true:'class1',false:'class2'}[className]"></div>

当className为真时使用样式1，为假时使用样式2.
这样子就会清晰很多，也十分好用。但如果有多个样式要切换该怎么办呢。

3.键值对方式
这种方式就是对于一个div要更换不同的样式，一般多于两个以上。

demo3

js :
function changeClass () {
    $scope.redClass = "red";
    $scope.yellowClass = "yellow";
    $scope.greenClass = "green";
}

html:
<div ng-class="{'red:redClass,'yellow':yellowClass,'green':greenClass}"></div>

css:
.red{...}
.yellow{...}
.green{...}

第三种方法要注意一点就是，如果多个样式都为true，优先级根据写入顺序，展示排在最后的样式。dome3中如果redClass,yellowClass,greenClass都为真，则优先显示green的样式,以此类推。

以上三种方法都可以实现动态样式，根据个人习惯选择即可。