AngularJS => powtórz

Wprowadzenie

Dyrektywa ngRepeat tworzy szablon raz dla każdego elementu z kolekcji. Kolekcja musi być tablicą lub obiektem. Każda instancja szablonu ma swój własny zakres, w którym dana zmienna pętli jest ustawiona na bieżący element kolekcji, a $index na indeks elementu lub klucz.

Składnia

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

Parametry

Zmienna	Detale
`$index`	przesunięcie iteratora liczb powtarzanego elementu (0.. długość-1)
`$first`	boolean prawda, jeśli powtarzany element jest pierwszy w iteratorze.
`$middle`	boolean prawda, jeśli powtarzany element znajduje się między pierwszym a ostatnim w iteratorze.
`$last`	boolean true, jeśli powtarzany element jest ostatni w iteratorze.
`$even`	boolean prawda, jeśli `$index` iteratora `$index` pozycja jest parzysta (w przeciwnym razie fałsz).
`$odd`	boolean true, jeśli `$index` iteratora `$index` jest nieparzysty (w przeciwnym razie false).

Uwagi

AngularJS zapewnia te parametry jako specjalne zmienne, które są dostępne w wyrażeniu ng-repeat i w dowolnym miejscu znacznika HTML, na którym żyje powtórzenie ng.

Iteracja po właściwościach obiektu

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

Na przykład

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

Śledzenie i duplikaty

ngRepeat używa $ watchCollection do wykrywania zmian w kolekcji. Kiedy nastąpi zmiana, ngRepeat dokonuje odpowiednich zmian w DOM:

Po dodaniu elementu do DOM jest dodawane nowe wystąpienie szablonu.
Po usunięciu elementu jego instancja szablonu jest usuwana z DOM.
Po zmianie kolejności elementów, ich odpowiednie szablony są ponownie uporządkowane w DOM.

Duplikaty

track by dowolnej listy, która może zawierać zduplikowane wartości.
track by również znacznie przyspiesza zmiany na liście.
Jeśli w tym przypadku nie używasz funkcji track by , [ngRepeat:dupes] błąd: [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 obsługuje wiele elementów z ng-repeat-start i 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>

Wynik:

Przedmiotów
Pozycja 1: wiersz 1
Pozycja 1: wiersz 2
Pozycja 2: wiersz 1
Pozycja 2: wiersz 2

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

AngularJS
powtórz

Szukaj…