AngularJS中ng-class經常使用寫法，三元表達式、評估表達式與對象寫法

前言：ng-class在angularjs樣式開發中使用頻率是特別高的，因此我用ng-class的三元運算符的寫法來定義一個樣式

 

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>

 

那麼到這裏本文就結束了，但願對你有所幫助！