AngularJS => нг-повтор

Вступление

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

Синтаксис

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

параметры

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

замечания

AngularJS предоставляет эти параметры в виде специальных переменных, которые доступны в выражении ng-repeat и в любом месте HTML-тега, на котором живет ng-repeat.

Итерирование свойств объекта

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

Например

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

Отслеживание и дублирование

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

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

Дубликаты

track by для любого списка, который может включать повторяющиеся значения.
track by также значительно ускоряет внесение изменений в список.
Если вы не используете track by в этом случае, вы получите сообщение об ошибке: [ngRepeat:dupes]

$scope.numbers = ['1','1','2','3','4'];

<ul>
  <li ng-repeat="n in numbers track by $index">
    {{n}}
  </li>
</ul>

ng-repeat-start + ng-repeat-end

AngularJS 1.2 ng-repeat обрабатывает несколько элементов с помощью ng-repeat-start и ng-repeat-end :

// table items
$scope.tableItems = [
    {
        row1: 'Item 1: Row 1',
        row2: 'Item 1: Row 2'
    },
    {
        row1: 'Item 2: Row 1',
        row2: 'Item 2: Row 2'
    }
];

// template
<table>
    <th>
        <td>Items</td>
    </th>
    <tr ng-repeat-start="item in tableItems">
        <td ng-bind="item.row1"></td>
    </tr>
    <tr ng-repeat-end>
        <td ng-bind="item.row2"></td>
    </tr>
</table>

Выход:

Предметы
Пункт 1: Строка 1
Пункт 1: Строка 2
Пункт 2: Строка 1
Пункт 2: Строка 2

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

AngularJS
нг-повтор

Поиск…