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

директива в модуле ng

Директива 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.

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

Чтобы повторить ряд элементов, а не только один родительский элемент, 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).

Информация о директиве

Эта директива создаёт новый контекст.
Эта директива выполняется на уровне приоритета 1000.

Использование

в качестве атрибута:
```
<ANY
  ng-repeat="">
...
</ANY>
```

Анимации

.enter - при добавлении нового элемента в список или отображении элемента после фильтрации

.leave - при удалении элемента из списка или при исключении элемента из результата фильтрации

.move - при фильтре, приводящем к переупорядочению смежных элементов, или при переупорядочивании содержимого элемента

Нажмите здесь, чтобы узнать больше о этапах, участвующих в анимации.

Аргументы

Параметр Тип Подробности

ngRepeat

Параметр	Тип	Подробности
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 аналогичным образом. Например: `item in items track by item.id` — типичный шаблон, когда элементы поступают из базы данных. В этом случае идентификатор объекта не имеет значения. Два объекта считаются эквивалентными, если их свойство `id` одинаково. Например: `item in items \| filter:searchText track by item.id` — шаблон, который можно использовать для применения фильтра к элементам в сочетании с выражением отслеживания.

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 аналогичным образом.

Например: item in items track by item.id — типичный шаблон, когда элементы поступают из базы данных. В этом случае идентификатор объекта не имеет значения. Два объекта считаются эквивалентными, если их свойство id одинаково.

Например: item in items | filter:searchText track by item.id — шаблон, который можно использовать для применения фильтра к элементам в сочетании с выражением отслеживания.

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

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.2.32/docs/api/ng/directive/ngRepeat