Angular ng-class详解及实例代码


Posted in Javascript onSeptember 19, 2016

 在前面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”;
}

<div class=”{{test}}”></div>

     这种方式完全没错,是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;
}

<div ng-class="{true: 'active', false: 'inactive'}[isActive]">
</div>

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

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

function Ctr($scope) { 

}

<div ng-class {'selected': isSelected, 'car': isCar}">
</div>

当 isSelected = true 则增加selected class,

当isCar=true,则增加car class,

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

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

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

Javascript 相关文章推荐
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
js如何获取网页所有图片
May 12 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
详谈for循环里面的break和continue语句
Jul 20 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
react-native android状态栏的实现
Jun 15 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
javascript实现的左右无缝滚动效果
Sep 19 #Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 #Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 #Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 #Javascript
javascript this详细介绍
Sep 19 #Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 #Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 #Javascript
You might like
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
YII路径的用法总结
2014/07/09 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
PHP.vs.JAVA
2016/04/29 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
破解Session cookie的方法
2006/07/28 Javascript
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
Vue+Vux项目实践完整代码
2017/11/30 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
pytorch中tensor的合并与截取方法
2018/07/26 Python
Django 视图层(view)的使用
2018/11/09 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Python 实现try重新执行
2019/12/21 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
环境科学专业个人求职信
2013/12/15 职场文书
化学教学随笔感言
2014/02/19 职场文书
党员公开承诺书
2014/03/25 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
小学中等生评语
2014/12/29 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
解析原生JS getComputedStyle
2021/05/25 Javascript