[TOC] # Angular處理樣式【ng-class】 在Angular中，添加元素的樣式也非常簡單，概括起來可以通過下列幾種方式來進行。 ## 直接綁定值 直接綁定值為CSS類別名稱的$scope對象屬性這種方式的操作非常簡單，先在控制器中添加一個值為CSS類別名稱的屬性，然后在頁面元素的ng-class屬性值中，綁定屬性名即可，這種方式操作起來雖然簡單，但在控制器中定義CSS類別名稱，并不是Angular所提倡的，我們在開發Angular應用時，盡量保證控制器的代碼都是處理業務邏輯，并不涉及頁面元素。 ~~~html <p ng-class="style1">Using Array Syntax</p> <p ng-class="[style1, style2, style3]">Using Array Syntax</p> ~~~ ## 以字符串數組方式選擇性添加CSS類別 以字符串數組方式選擇性添加CSS類別名稱這種方式將根據控制器中一個布爾類型的屬性值來決定頁面中元素添加的CSS樣式名，當該屬性值為true時，添加一個CSS樣式名，當屬性值為false值時，添加另外一個CSS樣式名。 ~~~html <div ng-class="{true:'red',false:’green’}[blnfocus]"></div> ~~~ 在上述代碼中，`<div>`的CSS樣式取決于“blnfocus”屬性值，當該值為true時，添加“red”樣式名，當該值為false時，添加“green”樣式名。這種方式只能在兩種樣式中選擇一種，并且{}和[]順序不可顛倒。在{}中設置可選擇的兩種樣式名稱，在[]中放置控制樣式的屬性名。 ## 通過定義key/value對象的方式來添加多個CSS類別 通過定義key/value對象的方式來添加多個CSS類別名稱與前面介紹的兩種添加CSS類別名的方法相比，第三種方法的功能要強大很多，它可以根據控制顯示樣式的屬性值添加多個樣式名。例如，先添加兩個用于控制樣式顯示的“a”和“b”屬性，這兩個屬性的類型均為布爾型，代碼如下。 $scope.a=false; $scope.b=true; 接下來在頁面的<div>元素中，添加ng-class屬性。在設置屬性值時，通過定義key/value對象的方式來添加多個CSS樣式名，代碼如下。 `<div ng-class="{'red':a ,'green':b}"></div>` 在上述ng-class屬性值設置過程中，樣式名“red”和“green”分別為“key”值，屬性值“a”和“b”分別為對應的“value”值。當“value”屬性值為true時，則添加對應的“key”即CSS樣式名。因此，這種方式可以實現添加多種CSS樣式名稱，適合在處理復雜樣式時使用。此外，在Angular中，還有另外兩個用于添加樣式的頁面指令，分別為“ng-class-odd”和“ng-class-even”，這兩個樣式指令是專用于以列表方式顯示數據，對應奇數行與偶數行的樣式。