AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle

這幾個都關於樣式及類名修改的，所以先把樣式代碼貼上吧。

  .red{color:red}
  .blue{color:blue}

寫案例用到的樣式就這么簡單的兩個，下面進入正題。

ngClass

ngClass指令允許在HTML標簽上通過綁定一個代表所有將被添加的類的表達式去動態的設定CSS類名。

該指令操作有三種不同的方式，根據三種類型的表達式計算結果為：

1. 如果表達式計算的結果是個字符串，那么這個字符串就是一個或多個以空格分隔開的類名；
2. 如果表達式計算的結果是個數組，而且這個數組的元素都是字符串，那么這個數組的每個元素就是一個或多個以空格分隔開的類名；
3. 如果表達式的計算結果為一個對象，那么對象的每個鍵值對的相對應的有真實存在的值將會被當作類名。

格式：ng-calss=“value”   ng-calss=“{true：’class-one’，false：“classs-two”}[value]”

value：表達式。

使用代碼：

  <input type="button" ng-click="isChecked = !isChecked" value="toggle" />
  <span ng-class="{red:isChecked}">Hello World !!!</span>
  <span ng-class="{true:'red'}[isChecked]">Hello World !!!</span>

 ngClass可以用於一些動態樣式的變化，當滿足某某某條件需要改變樣式的時候（比如：驗證不通過時顯示紅色邊框），這種的在項目開發中用到的地方還是較多的。

ngClassEven/ngClassOdd

ngClassEven和ngClassOdd 指令和ngClass工作原理一樣，除此之外，他們在ng-repeat里分別對偶（奇）數行有對應的影響。

格式： ng-calss-even=“value”    ng-class-odd=“value”

value：表達式。

使用代碼：

  <ol ng-init="items = ['A','B','C','D']">
    <li ng-repeat="i in items"><span  ng-class-odd="'red'" ng-class-even="'blue'">{{i}}</span></li>
  </ol>

上面這串代碼返回的結果就是奇數行的是紅色字體，偶數行的是藍色字體，我們在做表格數據的時候或者列表數據的時候用的較多，而且該指令使用也方便。

ngStyle

ngStyle指令允許在HTML元素上設置css樣式。

格式：ng-style=“value”    class=”ng-style:value”

value:表達式。

使用代碼：

  <div ng-app="Demo" ng-controller="testCtrl as ctrl">
      <p ng-style="ctrl.red">Hello World</p>
      <p class="ng-style:ctrl.blue">Hello World</p>
  </div>

  (function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);
    function testCtrl() {
        this.red = { color: "red" };
        this.blue = { color: "blue" };
    };
  }());

動態設置css樣式，這個指令需要和ngClass區分下，ngClass是動態設置css類名，ngStyle是動態設置css樣式。