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 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...
随机推荐
- Day6下午题解1
预计分数:100+?+30=130+? 实际分数:100+25+30=155 T1 https://www.luogu.org/problem/show?pid=T15920 DP裸题,用dp[i][ ...
- Javascript 6 种继承
1.原型链继承 // 1.原型链继承的两个问题===>在借用构造函数中可以解决下下面的两个问题//problem: 在创建子类型的实例时,不能向超类型的实例传递参数(在这里就是不能向A()里传递 ...
- Vue的学习--开始之前的思考
1.前端后端的思考,到底前端做什么工作 有关前端后端工作的区分,曾经有个朋友告诉我:web开发过程,前端负责从将数据从数据接口提取到前端.路由转换.前端交互展示等等所有工作,后端负责处理数据库里面的数 ...
- Flask项目之手机端租房网站的实战开发(十三)
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...
- 通过no-gui模式运行jmeter脚本与生成报告
说明:使用NO-GUI 模式,即命令行模式运行 JMeter 测试脚本能够大大缩减所需要的系统资源. 步骤:在GUI(图形化界面)模式调整好脚本,通过FTP工具将需要测试的.jmx文件传输到linux ...
- php中 重载(二)
接着上一次说的重载,我们了解下php中的重载,方法的重载,假设有管重载定义,參考:php中 重载(一)这个文章,谢谢.作为刚開始学习的人,大牛勿喷: 基本是两个方法 __call,当调用对一个不可訪问 ...
- bitmap-setBounds方法参数研究
对于如下的代码,一直有点不明白它具体每一步操作的影响.今天就稍微研究下.代码如下 xml代码 <RelativeLayout xmlns:android="http://schemas ...
- android-5.1编译配置(van)
必备文件: archives1211.tgz ubuntu_install_1204.tgz 安装指引: ubuntu_install_1204/readme.txt 工作目录结构: git ├── ...
- amazeui学习笔记一(开始使用1)--主干
amazeui学习笔记一(开始使用1)--主干 一.总结 1.英语:学好英语,编程轻松很多 2. layouts compatibility change log web app collection ...
- WINWORD.EXE-损坏的图像
问题详情: 系统键 + R键,运行 再输入regedit HKEY_CLASSES_ROOT\.docx HKEY_CLASSES_ROOT\Word.Document.12 HKEY_CURREN ...