AngularJS 指令ng-repeat

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 = {};
});

 

posted @ 2015-10-03 10:05  Byron12345  阅读(334)  评论(0编辑  收藏  举报