angularjs~ng-class

前端之家收集整理的这篇文章主要介绍了angularjs~ng-class前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. 通过数据的双向绑定(一般是不推荐的)

    1. $scope.className="change1";
      
      <divclass="{{className}}"></div>
      
      //或者像这样
      
      functionchangeClass(){
      $scope.className="change2";
      }
      
      <divclass="{{className}}"></div>
  2. 通过对象数组

    1. functionctrl($scope){
      $scope.isClassA=true;
      }
      
      <divng-class="{true:'ClassA',false:'anotherClass'}[isClassA]"></div>
      
      //当isClassA为true时,增加ClassA样式;当isClassA为false时,增加anotherClass样式。
  3. 通过key/value(推荐使用)

    1. functionctrl($scope){
      $scope.isClassA=true;
      $scope.isClassB=false;
      $scope.isClassC=false;
      }
      
      <divng-class="{'ClassA':isClassA,'ClassB':isClassB,'ClassC':isClassC}"></div>
      
      //当isClassA为true时,增加ClassA样式;当isClassB为true时,增加ClassB样式;当isClassC为true时,增加ClassC样式。

猜你在找的Angularjs相关文章