AngularJS中ng-class的用法

从今天开始写博，记录下自己技术发展的点滴吧。

一、什么是ng-class

ng-class是AngularJS预设的一个指令(directive)，通过这个指令能够对html元素的类(class)进行动态地设置。

二、在什么场景下用ng-class

在需要动态修改html元素的时候...所以其实这个问题等价于什么时候需要动态修改html元素的类？
在个人浅薄的编程经验中......需要动态修改html元素的类的时候基本是需要改变html元素的“表现”的时候。
举个栗子，在css中设置

.hidden{ display:none; }

那么需要隐藏一个元素的时候，对元素添加hidden类即可
再举个栗子，一个关闭按钮，有两种状态，可用与不可用，那么你可以在css中设置

/* 正常的关闭按钮 */ .btn-close{ background-image:url(images/btn-close.png) } /* 不可用的关闭按钮 */ .btn-close-disabled{ background-image:url(images/btn-close-disabled.png) }

这样通过动态设置 btn-close 和 btn-close-disabled 两个类，你就可以方便地修改按钮的外观了，是不是很神奇，很牛X......扯远了, 估计大神们已经在"呵呵"...回到正题

三、怎么用ng-class

其实AngularJS官方给的API给出的例子很详细，请戳这里
可以先看下Example中的style.css，定义了五种class

/* 对文本添加删除线 */ .strike { text-decoration: line-through; } /* 加粗文本 */ .bold { font-weight: bold; } /* 文本字体设置为红色 */ .red { color: red; } /* 错误文本的样式。红色字体，黄色背景 */ .has-error { color: red; background-color: yellow; } /* 文本字体设置为橘色 */ .orange { color: orange; }

ng-class的用法就是在html元素中设置ng-class="expression"，这个expression(表达式)可以为string，object，array三种类型
Example中index.html中展示了ng-class的三种用法，分别来看一下

第一种，表达式为object

<p ng-class="{strike: deleted, bold: important, 'has-error': error}"> Map Syntax Example </p> <label> <input type="checkbox" ng-model="deleted"/>deleted (apply "strike" class) </label> <br> <label> <input type="checkbox" ng-model="important"/>important (apply "bold" class) </label> <br> <label> <input type="checkbox" ng-model="error"/>error (apply "has-error" class) </label>

对象中的key-value对，key表示的是class的名称，value表示的是该html元素是否有这个 calss， 如果value为true，那么html元素就属于这个class，如果value为false，那么html元素就不属于这个class。具体的html外观表现就不截图了，大家可以自己试验。
在元素的class比较多的时候。相比另外两种，object类型的表达式就有优势。因为拼字符串是很烦的~

第二种，表达式为string

<p ng-class="style">Using String Syntax</p> <input type="text" ng-model="style" placeholder="Type: bold strike red" aria-label="Type: bold strike red">

例子中将ng-class 绑定到了input的输入值上。实际上可以通过修改$scope.style的值设置ng-class。
这种方式的优点就是简单、粗暴。缺点是class多了，写起来挺麻烦的

第三种，表达式为array

<p ng-class="[style1, style2, style3]">Using Array Syntax</p> <input ng-model="style1" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red"> <br> <input ng-model="style2" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 2"> <br> <input ng-model="style3" placeholder="Type: bold, strike or red" aria-label="Type: bold, strike or red 3"> <br>

这里array中的每个元素都绑定了一个input的输入值，实际上每个元素都使用了string类型的值

<p ng-class="[style4, {orange: warning}]">Using Array and Map Syntax</p> <input ng-model="style4" placeholder="Type: bold, strike" aria-label="Type: bold, strike"> <br> <label> <input type="checkbox" ng-model="warning"> warning (apply "orange" class) </label>

array中元素可以为string 或者object，object中key-value对的规则同上。array类型还是很强大的。。。

发现写博客还是蛮累人的，竟然写了一个小时....sign...