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 ...
随机推荐
- Android studio 安装,JDK 出错解决方案
在安装android studio 的时候,会报一个错误: --------------------------- Error launching Android Studio ----------- ...
- 动画原理——绘制正弦函数&环绕运动&椭圆运动
书籍名称:HTML5-Animation-with-JavaScript 书籍源码:https://github.com/lamberta/html5-animation 1.正弦函数.x位置递增, ...
- node.js(六) UTIL模块
1.inspect函数的基本用法 util.inspect(object,[showHidden],[depth],[colors])是一个将任意对象转换为字符串的函数,通常用于调试和错误输出.它至少 ...
- 初学springMVC搭建框架过程及碰到的问题
刚刚开始学spring框架,因为接了一个网站的项目,想用spring+springMVC+hibernate整合来实现它,现在写下搭建框架的过程及碰到的问题.希望给自己看到也能让大家看到不要踏坑. 一 ...
- JDBC操作封装
这两天学习了一下jdbc的封装,依据的是下面这篇 http://wenku.baidu.com/link?url=FaFDmQouYkKO24ApATHYmA5QzUcj-UE-7RSSZaBWPqk ...
- 自定义Toast样式-两行文本居中显示
toast可以设置自定义的view和显示位置.下面是一个简单的例子,复杂些的就是改变其布局文件就可以了. /** * @author BMR * @ClassName: ToastWithTwoTex ...
- 看到当年自己学SQL Server 的笔记
数据库 数据量DataBase,不同类型的数据应该放到不同的数据库中, .便于对各个数据类别进行个性管理 .避免命名冲突 .安全性更高; table(表):数据库中的关系指的就是表; 一张表就是一个类 ...
- java 多线程学习(一)
public class ThreadA extends Thread { ; public ThreadA() { super("ThreadID:" + (++threadID ...
- hadoop笔记之MapReduce的应用案例(利用MapReduce进行排序)
MapReduce的应用案例(利用MapReduce进行排序) MapReduce的应用案例(利用MapReduce进行排序) 思路: Reduce之后直接进行结果合并 具体样例: 程序名:Sort. ...
- mysql函数操作
<?php try{ $dbh = new PDO('mysql:dbname=testdb;host=localhost', 'mysql_user', 'mysql_pwd'); }catc ...