AngularJS ng-class用法
mark from https://my.oschina.net/gejiawen0913/blog/188547
ng-class
是AngularJS预设的一个指令,用于动态自定义dom元素的css class name,下面是其官网的api doc,AngularJS:ngClass
ng-class
在实际的应用场景中还是比较灵活的,而在AngularJS中一般有三种方式给元素的class属性做一些门道,如下
scope变量绑定(不推荐使用)
<!-- lang: js -->
function ctr($scope){
$scope.test =“classname”;
}
<div class=”{{test}}”></div>
说明
这种方式完全没错,是angular提供的一种改变class的方式,但是在controller涉及了classname在我看来是乎总是那么诡异,我希望的是controller是一个干净的纯javascript意义的object。
字符串数组形式
<!-- lang: js -->
function Ctr($scope) {
$scope.isActive = true;
}
<div ng-class="{true: 'active', false: 'inactive'}[isActive]"></div>
说明
其结果是2中组合,isActive表达式为true,则 active,负责inactive。
对象key/value处理
<!-- lang: js -->
function Ctr($scope) {
}
<div ng-class {'selected': isSelected, 'car': isCar}"></div>
说明
当 isSelected = true 则增加selected class,当isCar=true,则增加car class。以此类推。
参考
AngularJS ng-class用法的更多相关文章
- 学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
- 学习AngularJs:Directive指令用法(完整版)
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- AngularJS中transclude用法详解
这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...
- 转:AngularJS的Filter用法详解
Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用 ...
- AngularJS的Filter用法详解
上一篇讲了自定义Directive,本篇是要讲到AngularJS的Filter. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式 ...
- AngularJS 'Controller As'用法
AngularJS 1.2版本中提供了Controller As语法,简单说就是可以在Controller中使用this来替代$scope,使得Controller更像一个传统的JS类,相对于$sco ...
- angularjs之Restangular用法
参考资料: angularjs 获取服务端口数据的方法(三种) 学习-[前端]-angularjs基本框架以及向服务器发送请求的方法 Restangular on Angular
- angularJS的一些用法
AngularJS 事件指令: ng-click/dblclick ng-mousedown/up ng-mouseenter/leave ng-mousemove/over/out ng-keydo ...
- AngularJs:Directive指令用法
摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...
- 关于angularJS的一些用法
AngularJS 事件指令: ng-click/dblclick ng-mousedown/up ng-mouseenter/leave ng-mousemove/over/out ng-keydo ...
随机推荐
- 《Qt编程的艺术》——8.2 显示目录层次
现在我们准备通过创建一个小程序来获得关于InterView的实践经验,使用QDirModel和拿来就用的view,来在四个不同的view中显示主目录,如图8.5所示.在代码里,除了例行公事先实例化一个 ...
- 关于cocos2dx 3.0升级崩溃报错(unable to load native library) 和(Fatal signal 11 (SIGSEGV) at 0x00000000)
近期一直在Windows平台开发cocos-2dx游戏,期间做了一次引擎升级,升级到了3.0正式版本号.Windows平台上表现非常正常,没有出现什么问题. 上周五准备公布一个安卓包,编译非常轻松的就 ...
- JavaScript引用类型之RegExp类型(正则表达式)
ECMAScript中使用RegExp来支持正则表达式.使用下面类似Perl的语法,就可以创建一个正则表达式. var expression=/pattern/flags; 如上代码: pattern ...
- 在SQL Server 2008 中使用SQL脚本创建登录用户并授权
到处都使用超级用户sa显然是不安全的,因此有创建用户并让其只能访问某个数据库的必要.当然可以使用SQL Server自带的图形界面向导,但是太难用用了!有时候代码比较直接,比如这里: --使用已经创建 ...
- 第10课_dg
export ORACLE_BASE=/u01/app/oracle export ORACLE_HOME=$ORACLE_BASE/product/10.2.0/db_1 export ORACLE ...
- Object的增。删。查。改。遍历
1.增: 1.向对象添加属性和方法 (私有) ---> obj.属性 =""; 2.向对象原型添加方法 (公共) ---> obj.prototype. ...
- QF——对不同尺寸屏幕的适配(自动布局:AutoLayout)
对不同尺寸设备UI的适配: 很多时候,我们的App可能运行在不同尺寸的设备上,或者横竖屏时,呈现方法应该也不一样.这样便要求UI里各控件的位置和大小不能写死. 对于不同尺寸UI的适配,一般有三种对策: ...
- C语言学习——C和Java语言不同点
Java中有boolean数据类型,”真“为true,”假“为false.而且在if()括号里只能放boolean类型的值. C的基本数据类型和Java的基本一致,但C多了指针类型.指针是C语言的重点 ...
- Could not find class 'XXX.activity‘', referenced from method 'YYYY'
Could not find class 'XXX.activity‘', referenced from method 'YYYY'的解决方案: 出现这个错误.是由于eclipse升级ADT所导致的 ...
- JS中格式化数据保留两位小数
问题:在JS中格式化数据保留两位小数的函数的多种方法 最好方法: 保留两位好像是这样吧 var a = 9.39393; alert(a.toFixed(2)); 说明: ...