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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
javascript 写类方式之十
Jul 05 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
vuejs如何配置less
Apr 25 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
js实现电灯开关效果
Jan 19 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 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
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
小程序外卖订单界面的示例代码
2019/12/30 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
详解python上传文件和字符到PHP服务器
2017/11/24 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
python批量下载抖音视频
2019/06/17 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
岳庙导游词
2015/02/04 职场文书
主持人开场白台词
2015/05/29 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python
vue实现登陆页面开发实践
2022/05/30 Vue.js
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript