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中的其他对象
Jan 16 Javascript
JS 自定义函数缺省值的设置方法
May 05 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
vue之数据交互实例代码
Jun 16 Javascript
js精确的加减乘除实例
Nov 14 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
Vuex中实现数据状态查询与更改
Nov 08 Javascript
Vue3.0的优化总结
Oct 16 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
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
详解vue axios二次封装
2018/07/22 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
python删除文件示例分享
2014/01/28 Python
python交互式图形编程实例(二)
2017/11/17 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
python实现PCA降维的示例详解
2020/02/24 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
python实现简单的学生管理系统
2021/02/22 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
酒店出纳岗位职责
2013/12/29 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
助学贷款贫困证明
2014/09/23 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
小学运动会开幕词
2016/03/04 职场文书
Python基础之元编程知识总结
2021/05/23 Python
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技