api
https://docs.angularjs.org/api/ng/directive/ngClass
http://docs.ngnice.com/api/ng/directive/ngClass
使用方式
The directive operates in three different ways,depending on which of three types the expression evaluates to:
1，If the expression evaluates to a string,the string should be one or more space-delimited class names.
2，If the expression evaluates to an array,each element of the array should be a string that is one or more space-delimited class names.
3，If the expression evaluates to an object,then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.
三种使用方式，分别通过三种类型的（表达式计算出的）值
方式1： 当值为一个字符串时，它就会把用空格分开的字符串加到class中
方式2： 当值为一个数组时，它的每个字符串元素都会被加到class中
方式3： 当值为一个对象时(key=>value)，把value为true的key加到class中
常用实例
官网三种，分别对应键值对对象，字符串，字符串数组
<p ng-class="{strike: deleted,bold: important,red: error}">Map Syntax Example</p>
<input type="checkBox" ng-model="deleted"> deleted (apply "strike" class)<br>
<input type="checkBox" ng-model="important"> important (apply "bold" class)<br>
<input type="checkBox" ng-model="error"> error (apply "red" class)
<hr>
<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style" placeholder="Type: bold strike red">
<hr>
<p ng-class="[style1,style2,style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: bold,strike or red"><br>
<input ng-model="style2" placeholder="Type: bold,strike or red"><br>
<input ng-model="style3" placeholder="Type: bold,strike or red"><br>
.strike @H_502_193@{ text-decoration: line-through; }
.bold @H_502_193@{ font-weight: bold; }
.red @H_502_193@{ color: red; }
另外一个键值对常用实例
<p ng-class="{true:'red',false :'green'}[color]">Map Syntax Example 2</p>
<input type="checkBox" ng-model="color"> red <br>
动画
<input id="setbtn" type="button" value="set" ng-click="myVar='my-class'">
<input id="clearbtn" type="button" value="clear" ng-click="myVar=''">
<br>
<span class="base-class" ng-class="myVar">Sample Text</span>
.base-class @H_502_193@{ -webkit-transition:all cubic-bezier(0.250,0.460,0.450,0.940) 0.5s; transition:all cubic-bezier(0.250,0.940) 0.5s; }
.base-class.my-class @H_502_193@{ color: red; font-size:3em; }
