angular學習筆記-關於ng-class的那些事兒

在angular中為我們提供了3種方案處理class：

第一種：通過數據的雙向綁定（一般是不推薦的)

注意：當它的值為一個字符串時，它就會把用空格分開的字符串加到class中(不推薦，與常用class並無太大差別)

$scope.className = "change1";

<div class="{{className}}"></div>

//或者像這樣

function changeClass(){
  $scope.className = "change2";
}

<div class="{{className}}"></div>

第二種：通過對象數組

function ctrl($scope) {  
  $scope.isClassA = true; 
}

<div ng-class="{true:'ClassA',false:'anotherClass'}[isClassA]"></div>

//當isClassA為true時，增加ClassA樣式；當isClassA為false時，增加anotherClass樣式。

第三種：通過key/value（推薦使用）

function ctrl($scope) {  
  $scope.isClassA = true; 
  $scope.isClassB = false; 
  $scope.isClassC = false; 
}

<div ng-class="{'ClassA':isClassA,'ClassB':isClassB,'ClassC':isClassC}"></div>

 //當isClassA為true時，增加ClassA樣式；當isClassB為true時，增加ClassB樣式；當isClassC為true時，增加ClassC樣式。