AngularJS中ng-class的用法总结_angularjs ng-class

一、什么是ng-class

ng-class是AngularJS预设的一个指令(directive)，通过这个指令能够对html元素的类(class)进行动态地设置。

二、在什么场景下用ng-class

在需要动态修改html元素的时候...所以其实这个问题等价于什么时候需要动态修改html元素的类？
在个人浅薄的编程经验中......需要动态修改html元素的类的时候基本是需要改变html元素的“表现”的时候。
举个栗子，在css中设置

.hidden{
    display:none;
}

那么需要隐藏一个元素的时候，对元素添加hidden类即可
再举个栗子，一个关闭按钮，有两种状态，可用与不可用，那么你可以在css中设置

/* 正常的关闭按钮 */
.btn-close{
    background-image:url(images/btn-close.png)
}
/* 不可用的关闭按钮 */
.btn-close-disabled{
    background-image:url(images/btn-close-disabled.png)
}  

这样通过动态设置 btn-close 和 btn-close-disabled 两个类，你就可以方便地修改按钮的外观了，是不是很神奇，很牛X......

三、怎么用ng-class

其实AngularJS官方给的API给出的例子很详细，请戳这里
可以先看下Example中的style.css，定义了五种class

/* 对文本添加删除线 */
.strike {
    text-decoration: line-through;
}
/* 加粗文本 */
.bold {
    font-weight: bold;
}
/* 文本字体设置为红色 */
.red {
    color: red;
}
/* 错误文本的样式。红色字体，黄色背景 */
.has-error {
    color: red;
    background-color: yellow;
}
/* 文本字体设置为橘色 */
.orange {
    color: orange;
}

ng-class的用法就是在html元素中设置ng-class="expression"，这个expression(表达式)可以为string，object，array三种类型
Example中index.html中展示了ng-class的三种用法，分别来看一下

第一种，表达式为object

<p ng-class="{strike: deleted, bold: important, 'has-error': error}">
Map Syntax Example
</p>
<label>
  <input type="checkbox" ng-model="deleted"/>deleted (apply "strike" class)
</label>
<br>
<label>
  <input type="checkbox" ng-model="important"/>important (apply "bold" class)
</label>
<br>
<label>
  <input type="checkbox" ng-model="error"/>error (apply "has-error" class)
</label>

对象中的key-value对，key表示的是class的名称，value表示的是该html元素是否有这个 calss， 如果value为true，那么html元素就属于这个class，如果value为false，那么html元素就不属于这个class。具体的html外观表现就不截图了，大家可以自己试验。
在元素的class比较多的时候。相比另外两种，object类型的表达式就有优势。因为拼字符串是很烦的~

第二种，表达式为string

<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style" placeholder="Type: bold strike red" aria-label="Type: bold strike red">

例子中将ng-class 绑定到了input的输入值上。实际上可以通过修改$scope.style的值设置ng-class。
这种方式的优点就是简单、粗暴。缺点是class多了，写起来挺麻烦的

第三种，表达式为array（或对象数组）

<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red">
<br>
<input ng-model="style2" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 2">
<br>
<input ng-model="style3" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 3">
<br>

这里array中的每个元素都绑定了一个input的输入值，实际上每个元素都使用了string类型的值

<p ng-class="[style4, {orange: warning}]">Using Array and Map Syntax</p>
<input ng-model="style4" placeholder="Type: bold, strike" aria-label="Type: bold, strike">
<br>
<label>
  <input type="checkbox" ng-model="warning"> warning (apply "orange" class)
</label>

array中元素可以为string 或者object，object中key-value对的规则同上。array类型还是很强大的。。。