Angularjs使用ng-repeat中$even和$odd属性的注意事项


Posted in Javascript onDecember 31, 2016

前言

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>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
详细讲解JS节点知识
Jan 31 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 #Javascript
angularjs中ng-attr的用法详解
Dec 31 #Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 #Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 #Javascript
Javascript 实现全屏滚动实例代码
Dec 31 #Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 #Javascript
javascript 闭包详解及简单实例应用
Dec 31 #Javascript
You might like
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
如何打开php的gd2库
2017/02/09 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
JS中操作JSON总结
2020/12/06 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python探索之pLSA实现代码
2017/10/25 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
大学生个人简历自我评价
2013/11/16 职场文书
成品仓管员岗位职责
2013/12/11 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
优秀班组长事迹
2014/05/31 职场文书
招标保密承诺书
2015/01/20 职场文书
佛光寺导游词
2015/02/10 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
Python语言内置数据类型
2022/02/24 Python