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樣式。