©
Dokumen ini menggunakan Manual laman web PHP Cina Lepaskan
ngRepeat指令为集合中的每项实例化一个模板。每个模板的实例拥有自己的域，使用循环变量指向当前集合项上，$index指向当前项的索引或键值。
特殊属性应用于每个模板实例的本地域上，包括：
| 变量 | 类型 | 详述 |
|---|---|---|
$index |
number | 重复元素的迭代偏移值(0..length-1) |
$first |
boolean | 如果是重复元素的第一个迭代项则为true |
$middle |
boolean | 如果是在重复元素的第一个和最后一个之间的迭代项则为true |
$last |
boolean | 如果是重复元素的最后一个迭代项则为true |
$even |
boolean | 如果迭代项的位置$index是偶数则为true(其它为false) |
$odd |
boolean | 如果迭代项的位置$index为奇数则为true(其它为false) |
这些也可以用ngInit创建别名。这在实例化嵌套ngRepeats时很有用。
为了解决重复元素序列只有一个父元素的情况，ngRepeat (不同于其它ng指令)支持扩展重复范围，通过使用ng-repeat-start 和 ng-repeat-end分别定义明确的开始和结束点。ng-repeat-start 指令工作方法类似ng-repeat，但是会重复从标签定义本身位置开始到ng-repeat-end定义位置之间的所有HTML代码。
这个例子演示了它的使用场景：
<header ng-repeat-start="item in items">
Header {{ item }}
</header>
<div class="body">
Body {{ item }}
</div>
<footer ng-repeat-end>
Footer {{ item }}
</footer>如果上面例子中的items变量的值为['A','B']，则输出结果为：
<header>
Header A
</header>
<div class="body">
Body A
</div>
<footer>
Footer A
</footer>
<header>
Header B
</header>
<div class="body">
Body B
</div>
<footer>
Footer B
</footer>为 ngRepeat指定开始和结束点也支持AngularJS中的所有其它HTML指令语法(例如data-ng-repeat-start, x-ng-repeat-start 和 ng:repeat-start)。
<ANY
ng-repeat="">
...
</ANY>.enter - 当一个新的项添加到列表或条目经过过滤显示时
.leave - 当一个项从列表中删除或当一个项被过滤掉时
.move - 当相邻的一个项被过滤掉引起重新排序，或当条目内容进行重新排序时
点击这里 了解更多关于涉及动画的步骤。| 参数 | 类型 | 详述 |
|---|---|---|
| ngRepeat | repeat_expression |
决定如果枚举集合的表达式。当前支持的格式有：
|
这个例子在域中初始化一个名字列表，并使用ngRepeat显示每个人：
<div ng-init="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'}
]">
I have {{friends.length}} friends. They are:
<input Type="search" ng-model="q" placeholder="filter friends..." />
<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="friend in friends | filter:q">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
</ul>
</div>.示例:-animate-container {
background:white;
border:1px solid black;
list-style:none;
margin:0;
padding:0 10px;}
.animate-repeat {
line-height:40px;
list-style:none;
box-sizing:border-box;}
.animate-repeat.ng-move,.animate-repeat.ng-enter,.animate-repeat.ng-leave {
-webkit-transition:all linear 0.5s;
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:40px;}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.');
});