AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle
这几个都关于样式及类名修改的,所以先把样式代码贴上吧。
.red{color:red}
.blue{color:blue}
写案例用到的样式就这么简单的两个,下面进入正题。
ngClass
ngClass指令允许在HTML标签上通过绑定一个代表所有将被添加的类的表达式去动态的设定CSS类名。
该指令操作有三种不同的方式,根据三种类型的表达式计算结果为:
- 如果表达式计算的结果是个字符串,那么这个字符串就是一个或多个以空格分隔开的类名;
- 如果表达式计算的结果是个数组,而且这个数组的元素都是字符串,那么这个数组的每个元素就是一个或多个以空格分隔开的类名;
- 如果表达式的计算结果为一个对象,那么对象的每个键值对的相对应的有真实存在的值将会被当作类名。
格式:ng-calss=“value” ng-calss=“{true:’class-one’,false:“classs-two”}[value]”
value:表达式。
使用代码:
<input type="button" ng-click="isChecked = !isChecked" value="toggle" />
<span ng-class="{red:isChecked}">Hello World !!!</span>
<span ng-class="{true:'red'}[isChecked]">Hello World !!!</span>
ngClass可以用于一些动态样式的变化,当满足某某某条件需要改变样式的时候(比如:验证不通过时显示红色边框),这种的在项目开发中用到的地方还是较多的。
ngClassEven/ngClassOdd
ngClassEven和ngClassOdd 指令和ngClass工作原理一样,除此之外,他们在ng-repeat里分别对偶(奇)数行有对应的影响。
格式: ng-calss-even=“value” ng-class-odd=“value”
value:表达式。
使用代码:
<ol ng-init="items = ['A','B','C','D']">
<li ng-repeat="i in items"><span ng-class-odd="'red'" ng-class-even="'blue'">{{i}}</span></li>
</ol>
上面这串代码返回的结果就是奇数行的是红色字体,偶数行的是蓝色字体,我们在做表格数据的时候或者列表数据的时候用的较多,而且该指令使用也方便。
ngStyle
ngStyle指令允许在HTML元素上设置css样式。
格式:ng-style=“value” class=”ng-style:value”
value:表达式。
使用代码:
<div ng-app="Demo" ng-controller="testCtrl as ctrl">
<p ng-style="ctrl.red">Hello World</p>
<p class="ng-style:ctrl.blue">Hello World</p>
</div>
(function () {
angular.module("Demo", [])
.controller("testCtrl", testCtrl);
function testCtrl() {
this.red = { color: "red" };
this.blue = { color: "blue" };
};
}());
动态设置css样式,这个指令需要和ngClass区分下,ngClass是动态设置css类名,ngStyle是动态设置css样式。
AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle的更多相关文章
- Angular - - ngClass、ngClassEven、ngClassOdd、ngStyle
这几个都关于样式及类名修改的,所以先把样式代码贴上吧. .red{color:red} .blue{color:blue} 写案例用到的样式就这么简单的两个,下面进入正题. ngClass ngCla ...
- [Angularjs]ng-class,ng-class-even,ng-class-odd
写在前面 最近在通过angularjs将数据绑定到前端,其中也涉及到很多新的东西,一些效果还是很有必要实现的.在使用中发现ng-class,ng-class-even.ng-class-odd的使用, ...
- AngularJs学习笔记2-控制器、数据绑定、作用域
上次分享完该系列文章后有朋友也建议说1.x版本除了维护也没有必要学习,可以学习2.0开始学习,我也知道1.x无论是从性能还是架构上都没有2.x好,但是我想因为现在也有一些朋友还在用1.x版本,因为1. ...
- AngularJS进阶(四十)创建模块、服务
AngularJS进阶(四十)创建模块.服务 学习要点 使用模块构架应用 创建和使用服务 为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能 ...
- AngularJS:何时应该使用Directive、Controller、Service?
AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC ...
- AngularJS路由系列(5)-- UI-Router的路由约束、Resolve属性、路由附加数据、路由进入退出事件
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router约束路由参数● UI-Router的Resolve属性● UI-Router给路由附加数据● UI- ...
- JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例
一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...
- mongoDB 学习笔记纯干货(mongoose、增删改查、聚合、索引、连接、备份与恢复、监控等等)
最后更新时间:2017-07-13 11:10:49 原始文章链接:http://www.lovebxm.com/2017/07/13/mongodb_primer/ MongoDB - 简介 官网: ...
随机推荐
- 去除项目中的SVN标记
第一步:建立一个名字叫做remove-svn-folders.reg的文本(先建立txt文件,然后粘贴内容后再修改文件名字),记得后缀要叫.reg.文本的内容为: Windows Registry E ...
- 用Map-Reduce的思维处理数据
在很多人的眼里,Map-Reduce等于Hadoop,没有Hadoop谈Map-Reduce犹如自上谈兵,实则不然,Map-Reduce是一种计算模型,只是非常适合在并行的环境下运行,Hadoop是M ...
- C8051逆向电阻屏:头儿拍脑袋说电阻屏IC好赚钱3块钱成本能卖20几块。,一个月不分昼夜逆向成功后头儿说电阻屏已经被市场淘汰请放弃治疗。
参考: 书籍,<圈圈教你玩USB> C8051F单片机快速入门:http://www.waveshare.net/Left_Column/C8051F_Application_Notes ...
- IDEA 13 无法进入debug 模式解决方案
1.最近在idea中使用tomcat开发项目,像往常一样打开tomcat进行debug,但奇怪的事情出现了,项目根本不进断点.后查找原因,估计idea的加载参数方式是:先加载tomcat中设置的参数, ...
- ASP.NET MVC3入门教程之参数(数据)传递
本文转载自:http://www.youarebug.com/forum.php?mod=viewthread&tid=98&extra=page%3D1 MVC模式的参数(数据)传递 ...
- unittest使用过程中sys.exit(not self.result.wasSuccessful())
起因: 在运行下面的unittest过程中出现了个Traceback: 被测试脚本: # splitter.py def split(line, types=None, delimiter=None) ...
- MATLAB读取和写入Excel文件
1. 读取Excel文件 (a) 命令方式xlsread: 读取命令:[data,text] = xlsread(FileName, SheetName, Range); data保存的是数据单元 ...
- 东大OJ-1544: GG的战争法则
题目描述 你在桥上看风景 看风景的人在楼上看你 明月装饰了你的窗子 你装饰了我的梦 这是GG在长坂坡发出的感叹. 三年前GG莫名的穿越到了三国时期,在这三年里他看尽了各种杀戮,心里早已麻木.GG他渴望 ...
- 线性表的顺序存储结构C语言版
#include <stdio.h> #define MAXSIZE 101 #define N 10 typedef struct SeqList { int data[MAXSIZE] ...
- RAID的简单介绍
该文章全部复制转载于:http://blog.jobbole.com/83808/,只为做笔记供自己查看 简介 RAID是一个我们经常能见到的名词.但却因为很少能在实际环境中体验,所以很难对其原理 能 ...