10.ng-class-even与ng-class-odd
转自：https://www.cnblogs.com/best/tag/Angular/
AngularJS模板使你可以把该作用域内的数据直接绑定到所显示的HTML元素
ng-class-even与ng-class类似，ng-repeat中偶数时应用
ng-class-odd与ng-class类似，ng-repeat中奇数时应用
<p ng-repeat="a in animals" ng-class-odd="'odd'" ng-class-even="'even'">
{{a.name}}
</p>
示例代码：
<!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01">
<head>
<meta charset="UTF-8">
<title>指令</title>
<style>
.bg1{
background: lightcoral;
color:white;
}
.bg2{
background: lightpink;
color: white;
}
</style>
</head>
<body>
<!--指定控制器的作用范围-->
<form ng-controller="Controller1" name="form1">
<ul>
<li ng-repeat="u in users" ng-class-even="'bg1'" ng-class-odd="'bg2'">
{{u.name}}
</li>
</ul>
</form>
<!--引入angularjs框架-->
<script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//定义模块，指定依赖项为空
var app01 = angular.module("app01", []);
//定义控制器，指定控制器的名称，$scope是全局对象
app01.controller("Controller1", function($scope) {
$scope.users = [{
id: 1,
name: "tom",
sex: "男",
age: 19
}, {
id: 2,
name: "rose",
sex: "女",
age: 18
}, {
id: 7,
name: "jack",
sex: "男",
age: 16
}, {
id: 9,
name: "lucy",
sex: "女",
age: 20
}, {
id: 15,
name: "mark",
sex: "男",
age: 89
}];
});
</script>
</body>
</html>
运行结果：
10.ng-class-even与ng-class-odd的更多相关文章
- 不知道张(zhāng)雱（pāng）是谁？你out了！
张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...
- ng build --aot 与 ng build --prod
angluar的编译有以下几种方式: ng build 常规的压缩操作 代码体积最大 ng build --aot angular预编译 代码体积较小 ng build --pr ...
- 高可用Hadoop平台－Flume NG实战图解篇
1.概述 今天补充一篇关于Flume的博客,前面在讲解高可用的Hadoop平台的时候遗漏了这篇,本篇博客为大家讲述以下内容: Flume NG简述 单点Flume NG搭建.运行 高可用Flume N ...
- 【码在江湖】前端少侠的json故事（中）ng的json
ng的json 正所谓"人在江湖,身不由己",在开发之路上前端少侠dk遇到过种种困难,尤其在与后端进行数据对接的时候,不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式,正当他以为 ...
- Ngnice-国内ng学习网站
今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...
- 国内ng学习网站
Ngnice-国内ng学习网站2015-01-25 21:30 by 破狼, 534 阅读, 3 评论,收藏, 编辑 今天给angular新手介绍一个国内开源的ng学习网站http://www.ngn ...
- ng环境搭建步骤
1,安装node node -v查看版本号 2,安装淘宝镜像 npm config set registry https://registry.npm.taobao.org 3,安装cnpm npm ...
- Ng Alain使用 - cli和克隆两种方式
感觉没啥要写的,但是在查看相关资料的过程中发现不少浮夸的人,可以说是完全不阅读官方文档,操作完全无厘头,,创建了删,配置,再删除,,,扯蛋....., 方式一:CLI(推荐) # 确保使用的是最新版本 ...
- angular 2 - 001 ng cli的安装和使用
angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...
- angular2 ng build --prod 报错：Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'
调试页面 ng serve 正常 ng build 也正常 ng build --prod 异常:Module not found: Error: Can't resolve './$$_gendir ...
随机推荐
- Python 中多线程之 _thread
_thread模块是python 中多线程操作的一种模块方式,主要的原理是派生出多线程,然后给线程加锁,当线程结束的 时候取消锁,然后执行主程序 thread 模块和锁对象的说明 start_new_ ...
- c指针学习小结(参考别人总结的经验)
指针学习与总结一.1.int *p :p与*先结合,说明p是一个指针,然后与int结合说明指向的是一个int型的.2.int p[3] :p与[]结合说明p是一个数组,然后与int结合,说明数组里的元 ...
- size(A,1)
在matlab中,size()用来返回数据序列的行数和列数.size(A,1)返回的是矩阵A所对应的行数.另外,(1)s=size(A), 当只有一个输出参数时,返回一个行向量,该行向量的第一个元素时 ...
- chrome默认打开隐身模式
chrome图标右键属性,在“目标”后添加参数“ --incognito”(注意是双短划线,不包括双引号,双短划线前加一空格)就可以直接以隐身模式启动chrome了
- Hololens官方教程精简版 - 08. Sharing holograms（共享全息影像）
前言 注意:本文已更新到5.5.1f1版本号 本篇集中学习全息影像"共享"的功能,以实如今同一房间的人,看到"同一个物体".之所以打引號,是由于.每一个人看到的 ...
- datatable 前台和后台数据格式
datatable是很强大的前台表格插件,前台定义好表格格式后,后台须要返回指定格式的json数据! 例如以下: 首先是js的定义: var oTable = $('#sample_editable_ ...
- MySQL 一台主机多实例root登录问题
假设在一台机子上起多个MySQL实例. 比方port号为 3306. 3307. 3308 登录时候要选择不同的 mysql.sock文件 mysql -uroot -p123456 这一句 登录的是 ...
- leetCode解题报告5道题(七)
题目一:Interleaving String Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2 ...
- 福利贴——爬取美女图片的Java爬虫小程序代码
自己做的一个Java爬虫小程序 废话不多说.先上图. 目录命名是用标签缩写,假设大家看得不顺眼能够等完成下载后手动改一下,比方像有强迫症的我一样... 这是挂了一个晚上下载的总大小,只是还有非常多由于 ...
- lua实现大数运算
lua实现的大数运算,代码超短,眼下仅仅实现的加减乘运算 ------------------------------------------------ --name: bigInt --creat ...