AngularJS之ng-class指令
ng-class是AngularJS预设的一个指令,用于动态自定义dom元素的css class name.
<button ng-class="{{blue}}">button1</button>
$sc.blue = "blue";
.blue{
background-color: blue;
}
2:字符串数组形式。
<button ng-class="{true: 'red'}[isRed]">button2</button>
$sc.isRed = true;
.red{
background-color: red;
}
3:对象key/value处理。
<button ng-class="{'yellow': isYellow, 'color': color}">button3</button>
$sc.isYellow = true;
$sc.color = true;
.yellow{
background-color: yellow;
}
.color{
color: #ccc;
}
注意:如果元素中存在多个ng-class属性,只识别第一个ng-class,其余会忽略。
AngularJS之ng-class指令的更多相关文章
- AngularJS常用插件与指令收集
angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...
- angularjs 创建自定义的指令
创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...
- 带你走近AngularJS - 创建自己定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...
- 带你走近AngularJS 之创建自定义指令
带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...
- AngularJS:directive自定义的指令
除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命 ...
- AngularJS的表达式、指令的学习(2)
最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- 走进AngularJs(八) ng的路由机制
在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...
- AngularJS开发之_指令
指令是什么? 指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. 1.指令的匹配模式 index ...
- angularjs directive and component 指令与组件 ( 1.5.0 以后 )
之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...
随机推荐
- 逐步配置企业版Symantec Norton防病毒服务器
逐步配置企业版Symantec Norton防病毒服务器 配置企业版Symantec Norton NT操作系统,已经安装IIS 安装Symantec Norton 10 安装系统中心 650) th ...
- map按value查找相应元素
find_if算法用来在map中查找value符合条件的pair元素,返回指向该符合条件元素的迭代器,如果找到,那么返回最后一个元素的后一个元素end(); 1.首先要定义头文件 #include & ...
- CentOS不能进入登录界面
http://blog.csdn.net/powerzone/article/details/6798646
- ASM(四) 利用Method 组件动态注入方法逻辑
这篇继续结合样例来深入了解下Method组件动态变更方法字节码的实现.通过前面一篇,知道ClassVisitor 的visitMethod()方法能够返回一个MethodVisitor的实例. 那么我 ...
- Opera mini for S60 custom server
Opera mini for S60 custom server 在线改服 http://yourshell.info/mo/mini/ 本人贫穷一族,一直在用S60V2,这种手机启动JAVA很占内存 ...
- dot 语法全介绍
0. 保存 保存为 pdf:dot -Tpdf iris.dot -o iris.pdf 1. 基本 (1)无向图.有向图.子图 graph G {} // 无向图 digraph G {} // 有 ...
- TreeView 的简单实用
TreeView组件是由多个类来定义的,TreeView组件是由命名空间"System.Windows.Forms"中的"TreeView"类来定义的,而其中的 ...
- 自己定义progressdialog载入动画,这里还有旋转的载入条,美团,多个图片动画
自己定义progressdialog载入动画,这里还有旋转的载入条,美团,多个图片动画 下载Demo:http://download.csdn.net/detail/menglele1314/8775 ...
- oracle 多行转多列查询
oracle 多行转多列查询 ---create table Fruit(id int,name varchar(20), Q1 int, Q2 int, Q3 int, Q4 int);inse ...
- spyder结束死循环的方法
Ctrl+C 用这个有时候也是不行的,因为如果一直有图片在闪,那么就是直接关了吧 之前记错了一直用ctrl+x不行 导致崩溃,不能重启spyder 但是没有敢再试