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中编写精美图形界面(PyQt5)
纯代码,布局的讲解 见: https://cloud.tencent.com/developer/article/1345469 Qt designer设计文件 .ui转 .py文件,进阶使用 注:不 ...
- windows下matlab代码到ubuntu下中文注释出现乱码
转自:https://blog.csdn.net/kouyi5627/article/details/81513329 环境:Ubuntu18.04,Matlab R2017b. 把matlab文件从 ...
- ActiveMQ客户端配置使用
一.通过JNDI来使用ActiveMQ 1.jndi配置JMS对象 java.naming.factory.initial = org.apache.activemq.jndi.ActiveMQIni ...
- thymeleaf 常用标签
1.th:field th:field="*{user.sex}" 此标签会自动填充数据,比如用户的性别 user.sex 如果不为空,则会自动勾选上 2.th:each=&qu ...
- 【Henu ACM Round#24 C】Quiz
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 肯定是这样 先放k-1个,然后空1个,然后再放k-1个.然后再空1个.. 以此类推. 然后如果(n/k)*(k-1)+n%k> ...
- Hibernate持久化步骤
1. 读取并解析配置文件 Configuration config= new Configuration().configure(); 相当于使用DataSource获取连接前读取DataSour ...
- HDU 5297 Y sequence Y数列
题意:给定正整数n和r.定义Y数列为从正整数序列中删除全部能表示成a^b(2 ≤ b ≤ r)的数后的数列,求Y数列的第n个数是多少. 比如n = 10. r = 3,则Y数列为2 3 5 6 7 1 ...
- angularjs 标签指令
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- Windows下使用python绘制caffe中.prototxt网络结构数据可视化
准备工具: 1. 已编译好的pycaffe 2. Anaconda(python2.7) 3. graphviz 4. pydot 1. graphviz安装 graphviz是贝尔实验室开发的一个 ...
- 5.array
#include <iostream> #include <array> #include <algorithm> using namespace std; //a ...