壹 ❀ 引
ng-class可以說在angularjs樣式開發中使用頻率特別高了，這不我想利用ng-class的三元運算符的寫法來定義一個樣式，結果怎么都想不起來正確寫法，惱羞成怒還是整理一遍吧，那么本文開始：
貳 ❀ 常用寫法
1.ng-class使用變量
即ng-class的值是一個變量，當我們改變變量值時，得到的class名也會對應改變；例如下面的例子中文本樣式的class名由select的值決定，選擇不同選項得到不同的效果，例如：
<select name="" id="" ng-model="vm.style"> <option value="blue">藍底白字</option> <option value="red">紅底白字</option> </select> <span ng-class="vm.style">聽風是風</span>
如果我們有多個變量作為ng-class的值，可以通過數組的方式包裹住這些變量名，像這樣：
<span ng-class="[vm.style,vm.size]">聽風是風</span>
2.ng-class評估表達式
這種非常非常常見，我們已經確定了ng-class的名字，但是用一個變量決定這個class是否生效，例如：
<input type="checkbox" ng-model="vm.status"> <span ng-class="{red: vm.status}">聽風是風</span>
如果我們需要控制多個class名，請使用逗號進行分割
<span ng-class="{red: vm.status,blue: vm.value}">聽風是風</span>
注意：class名有加引號和不加引號兩種寫法，博客中例子都沒加引號，但推薦都加引號；原因是如果需要控制的class名為多個單詞，不加引號以 - 拼接會報錯，小駝峰命名不會，但如果加引號，使用 - 拼接可小駝峰都沒問題。
正確寫法：
<span ng-class="{redColor: vm.status}">聽風是風</span>
<span ng-class="{'red-color': vm.status}">聽風是風</span>
錯誤寫法：
<span ng-class="{red-color: vm.status}">聽風是風</span>
3.ng-class三元表達式(三元運算符)
這種寫法就更加常用了，我們控制一個變量的真假狀態，為真使用樣式A，為假使用樣式B：
<input type="checkbox" ng-model="vm.status"> <span ng-class="vm.status ? 'red' : 'blue'">聽風是風</span>
我們也可以使用評估表達式來模擬三元的效果：
<input type="checkbox" ng-model="vm.status"> <span ng-class="{red: vm.status,blue: !vm.status}">聽風是風</span>
4.ng-class對象寫法
這種寫法一般使用比較少見，同樣是根據變量來決定啟用不同的class，直接上代碼：
<select name="" id="" ng-model="vm.status"> <option value="color-blue">藍色</option> <option value="color-red">紅色</option> </select> <span ng-class="{color-blue:'blue',color-red:'red'}[vm.status]">聽風是風</span>
當然我們也能使用對象寫法模擬三元表達式的效果：
<input type="checkbox" ng-model="vm.status"> <span ng-class="{true:'blue',false:'red'}[vm.status]">聽風是風</span>
感受到ng-class的靈活與強大了嗎，日常開發中合理使用ng-class能讓你的樣式表達非常便捷，比如我在用戶登錄注冊功能塊，就使用ng-class實現了密碼顯示隱藏的效果：
<i class="eye" ng-click="vm.showPwd($event)" ng-class="vm.eyeStatus ? 'eyeOpen':'eyeClose'"></i>
那么到這里本文就結束了，希望對你有所幫助！