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 ...
随机推荐
- vue.js的<slot>
使用插槽分发内容在封装vue组件的时候,很多时候就不得不使用到vue的一个内置组件<slot>.slot是插槽的意思,顾名思义,这个<slot>组件的意义是预留一个区域,让其中 ...
- bzoj 1040 1040: [ZJOI2008]骑士
1040: [ZJOI2008]骑士 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 5210 Solved: 1987[Submit][Status ...
- 【Android进阶篇】Fragment的两种载入方式
一.概述 Fragment(碎片,片段)是在Android 3.0后才引入的,基本的目的是为了实如今大屏幕设备上的更加动态更加灵活的UI设计. 这是由于平板电脑的屏幕比手机大得多,所以屏幕上能够放很多 ...
- RISC设计原则及基本技术
CISC的特点: 指令系统庞大,指令功能复杂,指令寻址方式多,指令格式多 绝大多数指令须要多个机器周期完毕 各种指令都能够訪问存储器 採用微程序控制 有专用寄存器,少量 难以用优化编译技术生成高效的目 ...
- LSTM 时间序列数据的异常检测
见 http://www.infoq.com/cn/articles/deep-learning-time-series-anomaly-detection 但是不够详细
- zzulioj--1807--小明在努力（递归）
1807: 小明在努力 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 95 Solved: 35 SubmitStatusWeb Board Des ...
- 一天一个算法：求Sn=a+aa+aaa+…+aa…a之和
/* 求Sn=a+aa+aaa+…+aa…a之值,其中a是一个数字. 例如:2+22+222+…+22222(此时n=5),n由键盘输入.*/ void Function3() { int a,n,s ...
- kafka集群安装配置
1.下载安装包 2.解压安装包 3.进入到kafka的config目录修改server.properties文件 进入后显示如下: 修改log.dirs,基本上大部分都是默认配置 kafka依赖zoo ...
- ScrollView嵌套GridView不显示顶部
/* * scrollView中嵌套GridView不能显示头部 * * 方案①:scrollView.smoothScrollTo(0, 0); * * ...
- <Sicily>Huffman coding
一.题目描述 In computer science and information theory, a Huffman code is an optimal prefix code algorith ...