当前位置:AngularJS API / ng / 指令(directive) / ngRepeat
ngRepeat
该指令为集合中的每项都实例化一个模块。每个模块都有自己的scope,给定的循环变量将被设置为当前项,$index是他们的索引。
做为标签
<ng-repeat ng-repeat="repeat_expression"> ... </ng-repeat>
做为属性
<ANY ng-repeat="repeat_expression"> ... </ANY>
循环中的特殊变量,包括:
变量 | 类型 | 描述 |
---|---|---|
$index | number |
当前索引。 |
$first | boolean |
当循环的对象存在第一项时为true。 |
$middle | boolean |
当循环的对象存在中间项时为true。 |
$last | boolean |
当循环对象存在最后一项时为true。 |
$even | boolean |
循环的对象在当前位置的"$index"(索引)是偶数则为true,否则为false。 |
$odd | boolean |
循环的对象在当前位置的"$index"(索引)是奇数则为true,否则为false。 |
<div ng-controller="repeatController"> I have {{friends.length}} friends. They are: <input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" /> <ul class="example-animate-container"> <li class="animate-repeat" ng-repeat="friend in friends | filter:q as results"> [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old. </li> <li class="animate-repeat" ng-if="results.length === 0"> <strong>No results found...</strong> </li> </ul> </div>
angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope) { $scope.friends = [ {name:'John', age:25, gender:'boy'}, {name:'Jessie', age:30, gender:'girl'}, {name:'Johanna', age:28, gender:'girl'}, {name:'Joy', age:15, gender:'girl'}, {name:'Mary', age:28, gender:'girl'}, {name:'Peter', age:95, gender:'boy'}, {name:'Sebastian', age:50, gender:'boy'}, {name:'Erika', age:27, gender:'girl'}, {name:'Patrick', age:40, gender:'boy'}, {name:'Samantha', age:60, gender:'girl'} ]; });
.example-animate-container { background:white; border:1px solid black; list-style:none; margin:0; padding:0 10px; } .animate-repeat { line-height:30px; list-style:none; box-sizing:border-box; } .animate-repeat.ng-move, .animate-repeat.ng-enter, .animate-repeat.ng-leave { transition:all linear 0.5s; } .animate-repeat.ng-leave.ng-leave-active, .animate-repeat.ng-move, .animate-repeat.ng-enter { opacity:0; max-height:0; } .animate-repeat.ng-leave, .animate-repeat.ng-move.ng-move-active, .animate-repeat.ng-enter.ng-enter-active { opacity:1; max-height:30px; }
var friends = element.all(by.repeater('friend in friends')); it('should render initial data set', function() { expect(friends.count()).toBe(10); expect(friends.get(0).getText()).toEqual('[1] John who is 25 years old.'); expect(friends.get(1).getText()).toEqual('[2] Jessie who is 30 years old.'); expect(friends.last().getText()).toEqual('[10] Samantha who is 60 years old.'); expect(element(by.binding('friends.length')).getText()) .toMatch("I have 10 friends. They are:"); }); it('should update repeater when filter predicate changes', function() { expect(friends.count()).toBe(10); element(by.model('q')).sendKeys('ma'); expect(friends.count()).toBe(2); expect(friends.get(0).getText()).toEqual('[1] Mary who is 28 years old.'); expect(friends.last().getText()).toEqual('[2] Samantha who is 60 years old.'); });