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

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

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

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

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

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

Однако, есть несколько ограничений по сравнению с итерацией по массивам:

• Спецификация JavaScript не определяет порядок возвращаемых ключей для объекта, поэтому Angular полагается на порядок, возвращаемый браузером при выполнении for key in myObj. Браузеры, как правило, следуют стратегии предоставления ключей в порядке их определения, хотя есть исключения, когда ключи удаляются и восстанавливаются. См. страницу MDN о delete для получения дополнительной информации.

• ngRepeat будет игнорировать свойства объекта, начинающиеся с $, так как это префикс, используемый Angular для публичных ($) и частных ($$) свойств.

• Встроенные фильтры orderBy и filter не работают с объектами и выбросят ошибку, если будут использованы с объектом.

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

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

ngRepeat использует $watchCollection для обнаружения изменений в коллекции. При изменении ngRepeat вносит соответствующие изменения в DOM:

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

Для минимизации создания элементов DOM, ngRepeat использует функцию для «отслеживания» всех элементов коллекции и соответствующих элементов DOM. Например, если в коллекцию добавлен элемент, ngRepeat будет знать, что у всех других элементов уже есть элементы DOM, и не будет перерисовывать их.

Функция отслеживания по умолчанию (которая отслеживает элементы по их идентичности) не допускает дубликатов элементов в массивах. Это связано с тем, что при наличии дубликатов невозможно поддерживать взаимно однозначное соответствие между элементами коллекции и элементами 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>

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

<div ng-repeat="model in collection | orderBy: 'id' as filtered_result track by model.id">
  {{model.name}}
</div>

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

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