ng-class指令有3中操作方式
方式1: 當(dāng)它的值為一個(gè)字符串時(shí),它就會(huì)把用空格分開的字符串加到class中(不推薦,與常用class并無太大差別)
<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>
這種用法就是說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,