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

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

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

Перебор свойств объекта

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

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

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

В версии 1.4 сортировка по алфавиту была удалена. Теперь мы полагаемся на порядок, возвращаемый браузером при выполнении for key in myObj. Похоже, браузеры, как правило, следуют стратегии предоставления ключей в порядке их определения, хотя есть исключения при удалении и повторном добавлении ключей. См. страницу MDN по delete для получения дополнительной информации.

Если это нежелательно, рекомендуется преобразовать ваш объект в массив, отсортированный в требуемом порядке, прежде чем передавать его 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).