AngularJS中实现奇偶行不同样式
来源:互联网 发布:出售淘宝旗舰店id 编辑:程序博客网 时间:2024/06/06 03:18
在AngularJS中使用ng-repeat时希望生成的记录中奇偶行存在不同的样式,那么就要用到ng-class。
ngClass
ngClass指令允许在HTML标签上通过绑定一个代表所有将被添加的类的表达式去动态的设定CSS类名。
该指令操作有三种不同的方式,根据三种类型的表达式计算结果为:
如果表达式计算的结果是个字符串,那么这个字符串就是一个或多个以空格分隔开的类名;
如果表达式计算的结果是个数组,而且这个数组的元素都是字符串,那么这个数组的每个元素就是一个或多个以空格分隔开的类名;
如果表达式的计算结果为一个对象,那么对象的每个键值对的相对应的有真实存在的值将会被当作类名。
格式:ng-calss=“value” ng-calss=“{true:’class-one’,false:“classs-two”}[value]”
value:表达式。
使用代码:
Hello World !!!
Hello World !!!
ngClass可以用于一些动态样式的变化,当满足某某某条件需要改变样式的时候(比如:验证不通过时显示红色边框),这种的在项目开发中用到的地方还是较多的。
ngClassEven/ngClassOdd
ngClassEven和ngClassOdd 指令和ngClass工作原理一样,除此之外,他们在ng-repeat里分别对偶(奇)数行有对应的影响。
格式: ng-calss-even=“value” ng-class-odd=“value”
value:表达式。
使用代码:
- {{i}}
上面这串代码返回的结果就是奇数行的是红色字体,偶数行的是蓝色字体,我们在做表格数据的时候或者列表数据的时候用的较多,而且该指令使用也方便。
ngStyle
ngStyle指令允许在HTML元素上设置css样式。
格式:ng-style=“value” class=”ng-style:value”
value:表达式。
使用代码:
Hello World
Hello World
复制代码
(function () {
angular.module(“Demo”, [])
.controller(“testCtrl”, testCtrl);
function testCtrl() {
this.red = { color: “red” };
this.blue = { color: “blue” };
};
}());
复制代码
动态设置css样式,这个指令需要和ngClass区分下,ngClass是动态设置css类名,ngStyle是动态设置css样式。
- AngularJS中实现奇偶行不同样式
- CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
- jQuery+css打造table中奇偶行不同样式鼠标移上tr变色
- Angularjs Ng_repeat中实现复选框选中并显示不同的样式
- Css实现表格奇偶行不同色
- Css实现表格奇偶行不同色
- DevExpress XtraReports如何使奇偶行拥有不同的样式
- 对同一个标签奇偶行设置不同的样式
- JQuery和JS实现奇偶行不同背景颜色
- Sencha Touch中dataview设置奇偶行不同背景色
- 奇偶行显示不同样式操作,CSS3 :nth-child()伪类选择器
- 奇偶行显示不同样式操作,CSS3 :nth-child()伪类选择器
- 奇偶行table颜色不同
- angularjs中使用ng-repeat渲染最后一个li的时候设置不同样式
- js控制表单奇偶行样式
- Qt 在同一个QLabel中实现不同样式的显示
- Qt 在同一个QLabel中实现不同样式的显示
- 简单实现android中各种不同样式的文本
- Linux 1. 奇怪符号 ^@
- ODI 12c连接Oracle Hyperion Planning 11.1.2.4数据源
- There is no getter for property named '*' in 'class java.lang.String
- 第3章 寄存器(内存访问)
- 一个java程序员如何从新手慢慢成长
- AngularJS中实现奇偶行不同样式
- js仿照聊天记录的时间显示 今天 昨天
- VMWare虚拟机无法打开内核设备"\\.\Global\vmx86"的解决方法
- 清除position:relative占用的空白
- CG中的几何学——矩阵【4】
- Elasticsearch集群部署详解
- 基于Python的图像搜索引擎设计
- Vue.js 学习8 表单控件绑定
- c语言中的指针函数