Улучшить эту документацию Просмотреть исходный код ngRepeat

Директива ngRepeat создает шаблон один раз для каждого элемента из коллекции. Каждый экземпляр шаблона получает свой собственный контекст, где переменная цикла принимает текущий элемент коллекции, а $index — индекс или ключ элемента.

Специальные свойства доступны в локальном контексте каждого экземпляра шаблона, включая:

Переменная	Тип	Описание
$index	number	смещение итератора повторяемого элемента (0..длина-1)
$first	boolean	true, если повторяемый элемент является первым в итераторе.
$middle	boolean	true, если повторяемый элемент находится между первым и последним в итераторе.
$last	boolean	true, если повторяемый элемент является последним в итераторе.
$even	boolean	true, если позиция итератора $index чётная (иначе false).
$odd	boolean	true, если позиция итератора $index нечётная (иначе false).

Создание псевдонимов для этих свойств возможно с помощью ngInit. Это может быть полезно, например, при вложенных ngRepeat.

Итерация по свойствам объекта

Возможна итерация по свойствам объекта с использованием следующего синтаксиса:

<div ng-repeat="(key, value) in myObj"> ... </div>

Следует учитывать, что спецификация JavaScript не определяет порядок возврата ключей для объекта. Для гарантированного детерминированного порядка ключей, Angular до версии 1.3 включительно **сортирует ключи в алфавитном порядке**.

Если этого не требуется, рекомендуется преобразовать объект в массив, отсортированный в предпочтительном порядке, перед его предоставлением в ngRepeat. Это можно сделать с помощью фильтра, такого как toArrayFilter, или реализовав собственную $watch для объекта.

В версии 1.4 сортировка будет удалена, так как браузеры, как правило, следуют стратегии предоставления ключей в порядке их определения, хотя есть исключения при удалении и повторном добавлении ключей.

Отслеживание и дубликаты

Когда содержимое коллекции изменяется, ngRepeat производит соответствующие изменения в DOM:

• При добавлении элемента в коллекцию, новый экземпляр шаблона добавляется в DOM.
• При удалении элемента, его экземпляр шаблона удаляется из DOM.
• При изменении порядка элементов, соответствующие шаблоны переупорядочиваются в DOM.

По умолчанию, ngRepeat не допускает дубликатов в массивах. Это связано с тем, что при наличии дубликатов невозможно поддерживать взаимно однозначное соответствие между элементами коллекции и элементами DOM.

Если вам необходимо повторить дубликаты элементов, вы можете заменить стандартное поведение отслеживания своим, используя выражение track by.

Например, вы можете отслеживать элементы по индексу каждого элемента в коллекции, используя специальное свойство контекста $index:

<div ng-repeat="n in [42, 42, 43, 43] track by $index">
  {{n}}
</div>

В track by, вы можете использовать произвольные выражения, включая ссылки на пользовательские функции в контексте:

<div ng-repeat="n in [42, 42, 43, 43] track by myTrackingFunction(n)">
  {{n}}
</div>

Если вы работаете с объектами, имеющими свойство идентификатора, вы можете отслеживать по идентификатору вместо всего объекта. При последующей перезагрузке данных ngRepeat не придётся перестраивать элементы DOM для уже отрисованных элементов, даже если объекты JavaScript в коллекции были заменены новыми:

<div ng-repeat="model in collection track by model.id">
  {{model.name}}
</div>

При отсутствии выражения track by, оно эквивалентно отслеживанию с помощью встроенной функции $id, которая отслеживает элементы по их идентичности:

<div ng-repeat="obj in collection track by $id(obj)">
  {{obj.prop}}
</div>

Специальные точки начала и конца повторения

Для повторения серии элементов, а не только одного родительского элемента, ngRepeat (а также другие ng директивы) поддерживает расширение диапазона повторения путём определения явных точек начала и конца с помощью ng-repeat-start и ng-repeat-end соответственно. Директива ng-repeat-start работает так же, как ng-repeat, но будет повторять весь HTML-код (включая тег, в котором она определена) до и включая закрывающий HTML-тег, где расположена ng-repeat-end.

В примере ниже используется эта функция:

<header ng-repeat-start="item in items">
  Header {{ item }}
</header>
<div class="body">
  Body {{ item }}
</div>
<footer ng-repeat-end>
  Footer {{ item }}
</footer>

И с вводом ['A','B'] для переменной items в примере выше, вывод будет оценен как:

<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 также поддерживают все другие варианты синтаксиса HTML-директив, предоставляемых AngularJS (например, data-ng-repeat-start, x-ng-repeat-start и ng:repeat-start).