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>

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>