Angular ng-class详解及实例代码

Angular ng-class详解及实例代码

这篇文章主要介绍了Angular ng-class的知识,并整理了相关资料,有兴趣的小伙伴可以参考下

 在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJO(plain object javascript object),与view完全的隔离(交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量,其值为class name,形如:

 function ctr($scope){ $scope.test =“classname”; } 

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

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

1:scope变量绑定,如上例。(不推荐使用)
2:字符串数组形式。
3:对象key/value处理。

我们继续其他两种解决方案:

1字符串数组形式是针对class简单变化,具有排斥性的变化,true是什么class,false是什么class,其形如;

 function Ctr($scope) { $scope.isActive = true; } 

其结果是2中组合,isActive表达式为true,则 active,负责inactive。

2对象key/value处理主要针对复杂的class混合,其形如:

 function Ctr($scope) { } 

当 isSelected = true 则增加selected class,

当isCar=true,则增加car class,

所以你结果可能是4种组合。

个人推荐用2,3两种方式,不建议将class放入controller scope之上,scope需要保持纯洁行,scope上的只能是数据和行为。

以上就是对Angular ng-class详解,后续继续补充相关资料,谢谢大家对本站的支持!

以上就是Angular ng-class详解及实例代码的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读

    计算机主板BIOS设置详细-BIOS知识

    计算机主板BIOS设置详细-BIOS知识,,什么是电脑BIOS,一般电脑主板已经设置完毕后,电脑就开始按del键进入BIOS。系统启动BIOS,即微机的基本输入

    1394连接是什么1394网络适配器知识

    1394连接是什么1394网络适配器知识,,今天有网友在QQ群中问了这样一个问题:1394连接是什么?。由于笔者对1394连接不清楚,通过百度搜索与谷歌

    2010年底DIY硬件总结和安装参考

    2010年底DIY硬件总结和安装参考,,它似乎只是一眨眼的功夫从过去的最后一眼。看看现在的岗位似乎就在昨天,但看看当年的内容是真的走了,如果

    Windows8开发版系统高清系统接口图

    Windows8开发版系统高清系统接口图,,今天,微软发布,目前由开发者体验版Windows 8操作系统为整个英文系统,Windows 8带来了一系列新功能,没有折

    电脑主板品牌的一些基本知识

    电脑主板品牌的一些基本知识,,组装的电脑不再是什么奇怪的事情,不再是一个专业的专利,许多普通的电脑用户可以自己组装电脑,但是,毕竟用户电脑

    火星电脑软件开发|火星软件下载

    火星电脑软件开发|火星软件下载,,火星软件下载这个你可以先用电脑来实现这个事,首先你在电脑上打开浏览器,在浏览器里搜索活星直播软件,找到

    保持笔记本电脑的一些知识和技巧

    保持笔记本电脑的一些知识和技巧,,笔记本的价格比前些年便宜很多,但和其他电脑相比还是贵的,所以我们在使用笔记本时一定要注意它的维护。下