angularJs中关于ng-class的三种使用方式说明

在开发中我们通常会遇到一种需求：一个元素在不同的状态需要展现不同的样子。

而在这所谓的样子当然就是改变其css的属性，而实现能动态的改变其属性值，必然只能是更换其class属性

这里有三种方法：

第一种：通过数据的双向绑定（不推荐）

第二种：通过对象数组

第三种：通过key/value

下面简单说下这三种：

第一种：通过数据的双向绑定

实现方式：

<a href="http://blog.51cto.com/786678398/1903087#">?</a>

<code>function changeClass(){</code>

<code>  </code><code>$scope.className = "change2";</code>

<code>}</code>

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"`className`"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

当然，这种方式也的确给人的感觉怪怪的，个人认为：可以不得已而为之~

第二种：通过字符串数组的形式来改变

<code>  </code><code>$scope.className = true/false;</code>

<code> </code> 

<code>&lt;</code><code>div</code> <code>ng-class</code><code>=</code><code>"{true:‘zhende‘,false:‘jiade‘}[className]"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

但是有一点不好的只能够让一个元素拥有两种状态，虽然这么说！基本也是满足所需了，我一般都用这个。简单、直观！

第三种：通过key/value的方式

<code>  </code><code>$scope.lala = true;</code>

<code>&lt;</code><code>div</code> <code>ng-class</code><code>=</code><code>"{‘selectClass‘:select,‘choiceClass‘:choice,‘haha‘:lala}"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

本文转自gaofeng36599 51CTO博客，原文链接:http://blog.51cto.com/786678398/1903087