ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素
都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。
$index:遍历的进度(0...length-1)。
$first:当元素是遍历的第一个时值为true。
$middle:当元素处于第一个和最后元素之间时值为true。
$last:当元素是遍历的最后一个时值为true。
$even:当$index值是偶数时值为true。
$odd:当$index值是奇数时值为true。
下面的例子展示了如何用
$odd和$even来制作一个红蓝相间的列表。记住,JavaScript中数组
的索引从
0开始,因此我们用!$even和!$odd来将$even和$odd的布尔值反转。
<!doctype html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>
<ul ng-controller="PeopleController">
<li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">
{{person.name}} lives in {{person.city}}
</li>
</ul>
</body>
</html>
.odd {
background-color: blue;
}
.even {
background-color: red;
}
angular.module(‘myApp‘, [])
.controller(‘SomeController‘, function($scope) {
$scope.person = {};
});
原文:http://www.cnblogs.com/ByronWu12345/p/4853084.html