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。以此类推。

参考

  1. http://docs.angularjs.org/api/ng.directive:ngClass
  2. http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html

AngularJS ng-class用法的更多相关文章

  1. 学习AngularJs:Directive指令用法

    跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...

  2. 学习AngularJs:Directive指令用法(完整版)

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  3. AngularJS中transclude用法详解

    这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...

  4. 转:AngularJS的Filter用法详解

    Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用 ...

  5. AngularJS的Filter用法详解

    上一篇讲了自定义Directive,本篇是要讲到AngularJS的Filter. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式 ...

  6. AngularJS 'Controller As'用法

    AngularJS 1.2版本中提供了Controller As语法,简单说就是可以在Controller中使用this来替代$scope,使得Controller更像一个传统的JS类,相对于$sco ...

  7. angularjs之Restangular用法

    参考资料: angularjs 获取服务端口数据的方法(三种) 学习-[前端]-angularjs基本框架以及向服务器发送请求的方法 Restangular on Angular

  8. angularJS的一些用法

    AngularJS 事件指令: ng-click/dblclick ng-mousedown/up ng-mouseenter/leave ng-mousemove/over/out ng-keydo ...

  9. AngularJs:Directive指令用法

    摘自:http://www.jb51.net/article/83051.htm 摘要:Directive(指令)是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元 ...

  10. 关于angularJS的一些用法

    AngularJS 事件指令: ng-click/dblclick ng-mousedown/up ng-mouseenter/leave ng-mousemove/over/out ng-keydo ...

随机推荐

  1. 《Qt编程的艺术》——8.2 显示目录层次

    现在我们准备通过创建一个小程序来获得关于InterView的实践经验,使用QDirModel和拿来就用的view,来在四个不同的view中显示主目录,如图8.5所示.在代码里,除了例行公事先实例化一个 ...

  2. 关于cocos2dx 3.0升级崩溃报错(unable to load native library) 和(Fatal signal 11 (SIGSEGV) at 0x00000000)

    近期一直在Windows平台开发cocos-2dx游戏,期间做了一次引擎升级,升级到了3.0正式版本号.Windows平台上表现非常正常,没有出现什么问题. 上周五准备公布一个安卓包,编译非常轻松的就 ...

  3. JavaScript引用类型之RegExp类型(正则表达式)

    ECMAScript中使用RegExp来支持正则表达式.使用下面类似Perl的语法,就可以创建一个正则表达式. var expression=/pattern/flags; 如上代码: pattern ...

  4. 在SQL Server 2008 中使用SQL脚本创建登录用户并授权

    到处都使用超级用户sa显然是不安全的,因此有创建用户并让其只能访问某个数据库的必要.当然可以使用SQL Server自带的图形界面向导,但是太难用用了!有时候代码比较直接,比如这里: --使用已经创建 ...

  5. 第10课_dg

    export ORACLE_BASE=/u01/app/oracle export ORACLE_HOME=$ORACLE_BASE/product/10.2.0/db_1 export ORACLE ...

  6. Object的增。删。查。改。遍历

    1.增: 1.向对象添加属性和方法 (私有) --->   obj.属性 ="";  2.向对象原型添加方法 (公共) --->      obj.prototype. ...

  7. QF——对不同尺寸屏幕的适配(自动布局:AutoLayout)

    对不同尺寸设备UI的适配: 很多时候,我们的App可能运行在不同尺寸的设备上,或者横竖屏时,呈现方法应该也不一样.这样便要求UI里各控件的位置和大小不能写死. 对于不同尺寸UI的适配,一般有三种对策: ...

  8. C语言学习——C和Java语言不同点

    Java中有boolean数据类型,”真“为true,”假“为false.而且在if()括号里只能放boolean类型的值. C的基本数据类型和Java的基本一致,但C多了指针类型.指针是C语言的重点 ...

  9. Could not find class 'XXX.activity‘', referenced from method 'YYYY'

    Could not find class 'XXX.activity‘', referenced from method 'YYYY'的解决方案: 出现这个错误.是由于eclipse升级ADT所导致的 ...

  10. JS中格式化数据保留两位小数

    问题:在JS中格式化数据保留两位小数的函数的多种方法 最好方法: 保留两位好像是这样吧     var   a   =   9.39393;     alert(a.toFixed(2)); 说明: ...