Angularjs使用ng-repeat中$even和$odd属性的注意事项
前言
JavaScript中数组的索引是从0开始的，因此我们再取奇偶的时候需要用!$even和!$odd来将$even和$odd的布尔值反转
下面给出一个实例：
使用$odd和$even来制作一个红蓝相间的列表
<!DOCTYPEhtml>
<htmllang="zh-CN"ng-app="app">
<head>
<metacharset="utf-8">
<title>ng-repeat的用法</title>
<linkrel="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的布尔值反转。
<ulng-controller="PeopleController">
<ling-repeat="personinpeople"style="color:#fff;"ng-class="{even:!$even,odd:!$odd}">
{{person.name}}住在{{person.city}}{{$index}}
</li>
</ul>
<scriptsrc="../angular.min.js"></script>
<script>
angular.module('app',[])
.controller('PeopleController',['$scope',function($scope){
$scope.people=[
{name:'张三',city:'广东'},
{name:'李四',city:'江西'},
{name:'王五',city:'东北'}
]
}])
</script>
</body>
</html>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。