ng-class用法总结

angular动态更改className

• 在angular中为我们提供了3种方案处理class：

  1 scope变量绑定。（不推荐使用）

  <div class=”{{test}}”></div>
  
  function ctr($scope){
     $scope.test =“classname”;
  }

• 这种方式完全没错，是angular提供的一种改变class的方式，但是在controller涉及了classname在我看来是乎总是那么诡异，我希望的是controller是一个干净的纯javascript意义的object。

  2 字符串数组形式。

• 字符串数组形式是针对class简单变化，具有排斥cd性的变化，true是什么class，false是什么class

  div ng-class="{true: 'active', false: 'inactive'}[isActive]">
  
  $scope.isActive = true;

  ng-class="{'用户名': 'chinese_user', 'userName': 'Englisg_uesr'}[loginView.username]"
  //根据loginView.username的传值为用户名 class则为chinese_user

• isActive表达式为true，则 active，否则是inactive。

  3 对象key/value处理。

• 对象key/value处理主要针对复杂的class混合

  <div ng-class= "{'selected': isSelected, 'car': isCar}">

• 当 isSelected = true 则增加selected class
• 当 isCar=true,则增加car class

赏

谢谢你请我吃糖果

支付宝

微信