这里有新鲜出炉的 AngularJS 教程,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
本篇文章主要介绍了 angularJs 中关于 ng-class 的三种使用方式说明,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子。
而在这所谓的样子当然就是改变其 CSS 的属性,而实现能动态的改变其属性值,必然只能是更换其 class 属性
这里有三种方法:
第一种:通过数据的双向绑定(不推荐)
第二种:通过对象数组
第三种:通过 key/value(推荐)
下面简单说下这三种:
第一种:通过数据的双向绑定
实现方式:
- function changeClass() {
- $scope.className = "change2";
- }
- < div class = "{{className}}" > </div>/
网上各种不推荐,说实话,既然 angularJS 双向数据绑定这么吊,为什么不能通过这个来改变呢!查了下原由:"在 controller 涉及了 classname 在我看来是乎总是那么诡异,我希望的是 controller 是一个干净的纯 javascript 意义的 object",当然并没有明文固定不能够这么使用的,而且反而我觉得这样非常的方便,让 html 中元素想怎么变就怎么变!同理中的 img 元素中的 src 就不可以通过别的来改变,但是通过这种方式就是可以的!
当然,这种方式也的确给人的感觉怪怪的,个人认为:可以不得已而为之~
第二种:通过字符串数组的形式来改变
实现方式:
- function changeClass() {
- $scope.className = true / false;
- }
- < div ng - class = "{true:'zhende',false:'jiade'}[className]" > </div>/
实现很简单,就是当 className 为真的时候 class 为 zhende,相反则为 jiade。
但是有一点不好的只能够让一个元素拥有两种状态,虽然这么说!基本也是满足所需了,我一般都用这个。简单、直观!
第三种:通过 key/value 的方式
实现方式:
- function changeClass() {
- $scope.lala = true;
- }
- < div ng - class = "{'selectClass':select,'choiceClass':choice,'haha':lala}" > </div>/
当 lala 为 true 的时候,class 则为 haha,个人认为这个是比较推荐的,可以弥补第二种方式的点点遗憾~
来源: http://www.phperz.com/article/17/0813/338886.html