1. 程式人生 > >angularjs~ng-class

angularjs~ng-class

angular class ng-class

  • 通過數據的雙向綁定(一般是不推薦的)

    1. $scope.className = "change1";
      
      <div class="{{className}}"></div>
      
      //或者像這樣
      
      function changeClass(){
        $scope.className = "change2";
      }
      
      <div class="{{className}}"></div>
  • 通過對象數組

    1. function ctrl($scope) {  
        $scope.isClassA = true; 
      }
      
      <div ng-class="{true:'ClassA',false:'anotherClass'}[isClassA]"></div>
      
      //當isClassA為true時,增加ClassA樣式;當isClassA為false時,增加anotherClass樣式。
  • 通過key/value(推薦使用)

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

    angularjs~ng-class