[转]ng-class的用法
时间：2023-04-02 15:22:40
HTML
原始出处：https://segmentfault.com/a/11...在开发中，我们经常会遇到一个需求：一个元素需要在不同的状态下展示不同的功能look。这里所谓的外观当然是改变它的css属性，而要实现动态改变它的属性值的能力，那肯定是要替换它的class属性。这里有三种方式：第一种方式：通过数据的双向绑定（不推荐）第二种方式：通过对象数组第三种方式：通过key/value方式下面简单介绍一下这三种方式：第一种方式：通过数据的双向绑定实现方法：functionchangeClass(){$scope.className="change2";}
网上不推荐.说实话，既然angularJS的双向数据绑定这么吊，为什么不能通过这个来改变呢！查了下原因：“controller中涉及的classname在我看来总是那么奇怪，我希望controller是一个纯javascript意义的cleanobject”，当然没有明文不能这样用，而我反而觉得这样很方便，让html中的元素可以随心所欲的改变！同理，img元素中的src是不能通过其他方式改变的，但是通过这种方式是可以的！当然，这种方法确实给人一种奇怪的感觉。个人觉得不得已才可以的~方法二：以字符串数组的形式改变实现方法：functionchangeClass(){$scope.className=true/false;}
实现很简单，就是当className为true时，类为zhende，否则为jiade。但是有个坏处就是只有一个元素可以有两种状态，虽然是这么说的！基本满足需求，我一般都用这个。简单直观！！！以前我对第二种方式也有疑惑：这是什么用法？https://segmentfault.com/q/10...**这不是NG的用法，而是Javascript的技巧。{true:'adopt',false:'reject'}[item.approve]其中，如果把{true:'adopt',false:'reject'}当作变量a，可以改写为：a[item.approve]如果item.approve的值为true，则上面是a[true]，即'adopt'；否则，上面是一个[false]，即'reject'。当然，最常规的三元运算符item.approve?'采用':'拒绝'可以使用。**第三种方法：通过key/value方式：functionchangeClass(){$scope.lala=true;}
当lala为真时，类就哈哈了。个人觉得这个比较推荐，可以弥补第二种方式的遗憾~所以基本上，angularJS中的ng-class都是通过这三种方式实现的~
