解析angularjs ng-class

angularjs ng-class的用法，做项目遇到，看是简单，也确实简单，自己做了几个例子测试了一个。

三种用法：

1、作为字符用

2、对象数组形式

3、对象键值对形式 key/value

第一种就不用细说了，只要搜过ng-class的用法，首先知道的就是这个

第二种对象数组形式：

上图

自己做的时候，搜索说colors1为true就用red样式 为false就用yellow样式，这个没问题。问题是只能用这个true或者false吗？不是的，经过自己测试，其实这个就是javascript对象读取值的变量表现形式，这就很简单了。那就是colors1值是什么就用前面的什么值。比如colors1为true那就是true了。就知道了，不是说colors1判断为true。

比如我可以这样写

那么当colors1='change' 就是用blue这个class。

第三种写法：

上图

其实就是对象键值对，谁为真就用谁，这里的真就不一定非得true了，只要是javascript判断为真，都可以。比如上图的例子，运行结果 class="red yellow"

那么到底是显示谁的呢？这个就涉及到css的层级了，反正都加上，谁的层级高就显示谁的

总结：

1、第一种方式这里不再叙述

2、第二种方式，其实就是对象读取值，值是什么，那么样式就显示什么

3、第三种方式就是说，谁为真，就把谁的class加上也就是key值，那么显示谁呢？这个就是css层级决定

小女子第一次写博客，初来匝道，希望大家多多指正，之前喜欢写在有道云笔记上面简单记录遇到的问题和解决方法，但是从未发过博客，不过很喜欢优快云这个平台。