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 相关文章推荐
JS原型、原型链深入理解
Feb 27 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 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 常见郁闷问题答解
2006/11/25 PHP
php 字符串替换的方法
2012/01/10 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
php头像上传预览实例代码
2017/05/02 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
VBScript版代码高亮
2006/06/26 Javascript
改版了网上的一个js操作userdata
2007/04/27 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
从0开始学Vue
2016/10/27 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
Python如何实现邮件功能
2020/05/27 Python
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
小学生安全保证书
2014/02/01 职场文书
党员个人公开承诺书
2014/08/29 职场文书
小学四年级学生评语
2014/12/26 职场文书
交通安全教育心得体会
2016/01/15 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
PyTorch device与cuda.device用法
2022/04/03 Python