使用angularjs中ng-repeat的$even与$odd属性时的注意事项
JavaScript中数组的索引是从0开始的，因此我们再取奇偶的时候需要用!$even和!$odd来将$even和$odd的布尔值反转
下面给出一个实例：
使用$odd和$even来制作一个红蓝相间的列表
<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta charset="utf-8">
<title>ng-repeat的用法</title>
<link rel="stylesheet" href="../bootstrap.min.css">
<style>
.odd {
background-color: blue;
}
.even {
background-color: red;
}
</style>
</head>
<body>
<h4>ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素 都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。 </h4>
<ul>
<li>$index：遍历的进度（0...length-1）。 </li>
<li>$first：当元素是遍历的第一个时值为true。</li>
<li>$middle：当元素处于第一个和后元素之间时值为true。 </li>
<li>$last：当元素是遍历的后一个时值为true。 </li>
<li>$even：当$index值是偶数时值为true。 </li>
<li>$odd：当$index值是奇数时值为true。 </li>
</ul>
下面的例子展示了如何用$odd和$even来制作一个红蓝相间的列表。记住，JavaScript中数组 的索引从0开始，因此我们用!$even和!$odd来将$even和$odd的布尔值反转。
<ul ng-controller="PeopleController">
<li ng-repeat="person in people" style="color: #fff;" ng-class="{even: !$even, odd: !$odd}">
{{ person.name }} 住在 {{ person.city }} {{$index}}
</li>
</ul>
<script src="../angular.min.js"></script>
<script>
angular.module('app', [])
.controller('PeopleController', ['$scope', function($scope) {
$scope.people = [
{name: '张三', city: '广东'},
{name: '李四', city: '江西'},
{name: '王五', city: '东北'}
]
}])
</script>
</body>
</html>
使用angularjs中ng-repeat的$even与$odd属性时的注意事项的更多相关文章
- angularjs中$watch监听model（对象属性、对象）变化
昨天看了一下教学视频,学到了有关$watch的用法,想到最近做的一个页面中有个select下拉选项(select中的值变化了,则后面input中的值也跟着相应的变化),不知是否可以使用$watch来代 ...
- AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5
前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...
- AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3
1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
- (九)通过几段代码，理清angularJS中的$injector、$rootScope和$scope的概念和关联关系
$injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是 ...
- AngularJS中数据双向绑定(two-way data-binding)
1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
- 理解AngularJS中的依赖注入
点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...
- angularJS中$apply()方法详解
这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下 对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...
- 深入学习AngularJS中数据的双向绑定机制
来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...
随机推荐
- VS Code 项目编译
编译运行vs code源码 如果我们想本地运行 vs code 需要安装一些必要的库. 我们需要安装 'Node.JS' . 这里需要注意的是,最低版本要求是'5.1.0'. 还需要安装 'Pytho ...
- phpcms V9 修改生成静态文件路径/html
在论坛看到部分用户反馈这个问题,要修改的其实是html_root的值,默认是"/html"如果要生成在网站根目录的话,这个值则要为空.论坛上现在看到的办法是打开caches\con ...
- 比file_get_contents稳定的curl_get_contents
相信使用过file_get_contents函数的朋友都知道,当获取的$url访问不了时,会导致页面漫长的等待,甚至还能导致PHP进程占用CPU达100%,因此这个函数就诞生了 分享一个实际在用的函数 ...
- nhibernate 3.3 linq扩展
nhibernate的sqlserver linq 全文检索搞了半天 方法一 ,扩展LinqToHqlGeneriatorsRegistry http://www.cnblogs.com/xiarug ...
- 无法将类型“System.Nullable`1”强制转换为类型“System.Object”。LINQ to Entities 仅支持强制转换 EDM 基元或枚举类型。
在一个项目中使用LINQ和EF时出现了题目所示的异常,搜索了很多资料都找不到解决办法,主要是因为EF方面的知识欠缺. 先将情况记录如下,以供以后参考. 查询主要设计两张表,由外键关联: 在进行下面的查 ...
- 深入理解querySelector(All)
querySelector和querySelectorAll同属于Selectors API Level 1规范,该规范早在2006年就已经开始发展,并在2007年10月形成querySe ...
- Android进阶2之PopupWindow弹窗（有点悬浮窗的感觉）
PopupWindow是一个可以用来显示一个任意的视图的弹出窗口,他需要完全依赖layout布局. 它没什么界面,在弹出的窗口中完全显示布局中的控件. 上面两个美女头就是弹窗PopupWindow显示 ...
- rnqoj-28-合唱队形-最长上升子序列
想当年大一的时候,一个最长上升子序列的问题使得我的罚时上升了不少....当年还是图样啊 这道题目本质就是求最长上升子序列 #include<stdio.h> #include<str ...
- ie版本判断的js hack
常用来判断各种浏览器版本的 ie js hack如下: 1. <!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–> 2. < ...
- STL_vector
1.任何改变vector长度的操作都会使已经存在的迭代器失效 vector是C++标准模板库中的部分内容,它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库.vector之所以被认为是一个容 ...