AngularJS: API: ng/directive/ngRepeat

ngRepeat

- directive in module ng

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)。

指令信息

这个指令会创建新的作用域(scope)。
这个指令执行优先级为1000.

用法

作为属性使用:
```
<ANY
  ng-repeat="">
...
</ANY>
```

动画

.enter - 当一个新的项添加到列表或条目经过过滤显示时

.leave - 当一个项从列表中删除或当一个项被过滤掉时

.move - 当相邻的一个项被过滤掉引起重新排序，或当条目内容进行重新排序时

点击这里了解更多关于涉及动画的步骤。

参数

参数类型详述

ngRepeat

repeat_expression

参数	类型	详述
ngRepeat	repeat_expression	决定如果枚举集合的表达式。当前支持的格式有： `variable in expression` – variable是用户定义的循环变量， `expression`是用于枚举集合的域表达式。例如: `album in artist.albums`. `(key, value) in expression` – `key` 和 `value` 可以是任何用户定义的标识， `expression`是用于枚举集合的域表达式。例如: `(name, age) in {'adam':10, 'amalie':12}`. `variable in expression track by tracking_expression` – 您也可以提供一个可选的跟踪函数，用来关联到DOM元素集合中的对象。如果没有给出跟踪函数，ng-repeat使用标识来关联集合中的元素。对于解决相同键，它会比使用一个跟踪函数产生更多错误。(意思是会有两个不同对象映射到相同的DOM元素，也许不会。) 表达式可以使用过滤器，它会在调用跟踪函数前生效。例如: `item in items` 等同于 `item in items track by $id(item)`. 这意味着，DOM元素会关联到数组中的条目标识上。例如: `item in items track by $id(item)`. 内建的`$id()`函数能够用于为数组内的条目分配一个唯一的`$$hashKey`属性。这个属性用于作为数组中的条目标识关联到DOM元素的键值。移动数组中的同一个对象同样会在DOM中移动DOM元素。例如: `item in items track by item.id` 是当items来自数据库时的典型模式。在这种情况下，对象的标识不会有问题。两个对象被认为是相等的，只要他们的 `id`属性是一样的。例如: `item in items \| Filter:searchText track by item.id` 是对条目同时使用过滤器和跟踪表达式的模式。

决定如果枚举集合的表达式。当前支持的格式有：

variable in expression – variable是用户定义的循环变量， expression是用于枚举集合的域表达式。

例如: album in artist.albums.
(key, value) in expression – key 和 value 可以是任何用户定义的标识， expression是用于枚举集合的域表达式。

例如: (name, age) in {'adam':10, 'amalie':12}.
variable in expression track by tracking_expression – 您也可以提供一个可选的跟踪函数，用来关联到DOM元素集合中的对象。如果没有给出跟踪函数，ng-repeat使用标识来关联集合中的元素。对于解决相同键，它会比使用一个跟踪函数产生更多错误。(意思是会有两个不同对象映射到相同的DOM元素，也许不会。) 表达式可以使用过滤器，它会在调用跟踪函数前生效。

例如: item in items 等同于 item in items track by $id(item). 这意味着，DOM元素会关联到数组中的条目标识上。

例如: item in items track by $id(item). 内建的$id()函数能够用于为数组内的条目分配一个唯一的$$hashKey属性。这个属性用于作为数组中的条目标识关联到DOM元素的键值。移动数组中的同一个对象同样会在DOM中移动DOM元素。

例如: item in items track by item.id 是当items来自数据库时的典型模式。在这种情况下，对象的标识不会有问题。两个对象被认为是相等的，只要他们的 id属性是一样的。

例如: item in items | Filter:searchText track by item.id 是对条目同时使用过滤器和跟踪表达式的模式。

示例

这个例子在域中初始化一个名字列表，并使用ngRepeat显示每个人：

index.html

<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>

animations.css

.示例:-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;}

protractor.js

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.');
 });