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. Android studio 安装,JDK 出错解决方案

    在安装android studio 的时候,会报一个错误: --------------------------- Error launching Android Studio ----------- ...

  2. 动画原理——绘制正弦函数&环绕运动&椭圆运动

    书籍名称:HTML5-Animation-with-JavaScript 书籍源码:https://github.com/lamberta/html5-animation  1.正弦函数.x位置递增, ...

  3. node.js(六) UTIL模块

    1.inspect函数的基本用法 util.inspect(object,[showHidden],[depth],[colors])是一个将任意对象转换为字符串的函数,通常用于调试和错误输出.它至少 ...

  4. 初学springMVC搭建框架过程及碰到的问题

    刚刚开始学spring框架,因为接了一个网站的项目,想用spring+springMVC+hibernate整合来实现它,现在写下搭建框架的过程及碰到的问题.希望给自己看到也能让大家看到不要踏坑. 一 ...

  5. JDBC操作封装

    这两天学习了一下jdbc的封装,依据的是下面这篇 http://wenku.baidu.com/link?url=FaFDmQouYkKO24ApATHYmA5QzUcj-UE-7RSSZaBWPqk ...

  6. 自定义Toast样式-两行文本居中显示

    toast可以设置自定义的view和显示位置.下面是一个简单的例子,复杂些的就是改变其布局文件就可以了. /** * @author BMR * @ClassName: ToastWithTwoTex ...

  7. 看到当年自己学SQL Server 的笔记

    数据库 数据量DataBase,不同类型的数据应该放到不同的数据库中, .便于对各个数据类别进行个性管理 .避免命名冲突 .安全性更高; table(表):数据库中的关系指的就是表; 一张表就是一个类 ...

  8. java 多线程学习(一)

    public class ThreadA extends Thread { ; public ThreadA() { super("ThreadID:" + (++threadID ...

  9. hadoop笔记之MapReduce的应用案例(利用MapReduce进行排序)

    MapReduce的应用案例(利用MapReduce进行排序) MapReduce的应用案例(利用MapReduce进行排序) 思路: Reduce之后直接进行结果合并 具体样例: 程序名:Sort. ...

  10. mysql函数操作

    <?php try{ $dbh = new PDO('mysql:dbname=testdb;host=localhost', 'mysql_user', 'mysql_pwd'); }catc ...