ng-class指令有3中操作方式

方式1： 當(dāng)它的值為一個(gè)字符串時(shí)，它就會(huì)把用空格分開(kāi)的字符串加到class中(不推薦，與常用class并無(wú)太大差別)

<div ng-class="{{myclass}}"></div>
....
<script>
function someController($scope){
$scope.myclass = "xxx";
}
</script>

方式2： 當(dāng)值為一個(gè)數(shù)組時(shí)，它每個(gè)字符串元素都會(huì)被加到class中

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


<input ng-model="style2" placeholder="Type: bold, strike or red">


<input ng-model="style3" placeholder="Type: bold, strike or red">
解釋：當(dāng)我們?cè)跇邮街卸x好bold,strike,red；類的樣式后，我們輸入這些字符串就會(huì)出現(xiàn)效果

方式3： 當(dāng)值為一個(gè)對(duì)象時(shí)(key=>value)，把value為true的key加到class中

<div ng-class="{true :'red', false :'green'}[someVariable]"></div>

這種用法就是說(shuō)variable為true時(shí)，就給元素加上red這個(gè)class，如果variable為false就加上green這個(gè)class，這個(gè)在邏輯比較簡(jiǎn)單的時(shí)候還是蠻好用的。

下一種適合需要添加多個(gè)類的時(shí)候，也就是ng-class的值為一個(gè)對(duì)象

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


<input type="checkbox" ng-model="important"> important (apply "bold" class)


<input type="checkbox" ng-model="error"> error (apply "red" class)
解釋：上面代碼ng-class就是一個(gè)對(duì)象，我們把deleted,important,error進(jìn)行雙向數(shù)據(jù)綁定，當(dāng)我們?cè)赾heckbox勾選時(shí)，它們變?yōu)閠rue，然后對(duì)應(yīng)的key就被加到class中

<div ng-class {'selected': isSelected, 'car': isCar}">
當(dāng) isSelected = true 則增加selected class，當(dāng)isCar=true,則增加car class，