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 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...
随机推荐
- Android 多线程断点续传同时下载多个大文件
最近学习在Android环境中一些网络请求方面的知识,其中有一部分是关于网络下载方面的知识.在这里解析一下自己写的demo,总结一下自己所学的知识.下图为demo的效果图,仿照一些应用下载商城在Lis ...
- vue中添加favicon
基于vue-cli 2 首先将favicon.ico图片放在根目录下,通过以下两种方法使其显示正确. 方法一:修改index.html文件 <link rel="shortcut ic ...
- 斜率优化dp练习
1.HDU3507 裸题,有助于理解斜率优化的精髓. dp[i]=min(dp[j]+m+(sum[i]-sum[j])2) 很显然不是单调队列. 根据斜率优化的的定义,就是先设两个决策j,k 什么时 ...
- 初学WCF需要注意的地方
1.WCF的元数据发布有两种方式: a.HTTP-GET方式发布数据:让客户端使用HTTP-GET方式来获取数据是比较常见的方式.所谓HTTP—GET方式,是指当客户端发送一个HTTP-GET请求时, ...
- 不同jquery对象触发相同的函数 “.js-story-title,.js-mt-index-cont2”
$(document).on("click",".js-story-title,.js-mt-index-cont2",function () {}
- vue实现一个会员卡的组件(可以动态传入图片(分出的一个组件)、背景、文字、卡号等)
自己在写这个组件的时候主要遇到的问题就是在动态传入背景图片或者背景色的时候没能立马顺利写出来,不过现在实现了这个简单组件就和大家分享一下 <template> <div class= ...
- Tomcat redis 配置
http://www.cnblogs.com/interdrp/p/4868740.html http://blog.csdn.net/qq584852076/article/details/4650 ...
- 洛谷——P1598 垂直柱状图
https://www.luogu.org/problem/show?pid=1598 题目描述 写一个程序从输入文件中去读取四行大写字母(全都是大写的,每行不超过72个字符),然后用柱状图输出每个字 ...
- upf1
创建supply net,两种方法 1. creat_supply_net VDD -domain PD_B 2. creat_supply_net VDD
- GO语言学习(九)Go 语言运算符
运算符用于在程序运行时执行数学或逻辑运算. Go 语言内置的运算符有: 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 其他运算符 接下来让我们来详细看看各个运算符的介绍. 算术运算符 下表 ...