AngularJS => Wiederholung

Einführung

Die Direktive ngRepeat instanziiert eine Vorlage einmal pro Element aus einer Auflistung. Die Sammlung muss ein Array oder ein Objekt sein. Jede Vorlageninstanz erhält ihren eigenen Gültigkeitsbereich, wobei die angegebene Schleifenvariable auf das aktuelle Collection-Element und $index auf den Elementindex oder -schlüssel gesetzt wird.

Syntax

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

Parameter

Variable	Einzelheiten
`$index`	Nummern- Iterator-Offset des wiederholten Elements (0..Länge-1)
`$first`	boolean true, wenn sich das wiederholte Element zuerst im Iterator befindet.
`$middle`	boolean true, wenn sich das wiederholte Element im ersten Schritt zwischen dem ersten und dem letzten Element befindet.
`$last`	boolean true, wenn das wiederholte Element das letzte Element im Iterator ist.
`$even`	boolean true, wenn der Iteratorposition `$index` ist (andernfalls false).
`$odd`	boolean true, wenn der Iteratorposition `$index` ungerade ist (andernfalls false).

Bemerkungen

AngularJS stellt diese Parameter als spezielle Variablen zur Verfügung, die im Ausdruck ng-repeat und an beliebiger Stelle innerhalb des HTML-Tags verfügbar sind, an dem der ng-repeat lebt.

Iteration über Objekteigenschaften

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

Zum Beispiel

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

Tracking und Duplikate

ngRepeat verwendet $ watchCollection , um Änderungen in der Sammlung zu erkennen. Wenn eine Änderung ngRepeat , nimmt ngRepeat die entsprechenden Änderungen am DOM vor:

Wenn ein Element hinzugefügt wird, wird eine neue Instanz der Vorlage zum DOM hinzugefügt.
Wenn ein Element entfernt wird, wird seine Vorlageninstanz aus dem DOM entfernt.
Wenn Artikel neu angeordnet werden, werden ihre entsprechenden Vorlagen im DOM neu angeordnet.

Duplikate

track by für jede Liste, die doppelte Werte enthalten kann.
track by beschleunigt auch Listenänderungen erheblich.
Wenn Sie in diesem Fall track by nicht verwenden, wird der Fehler [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 behandelt mehrere Elemente mit ng-repeat-start und 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>

Ausgabe:

Artikel
Punkt 1: Zeile 1
Punkt 1: Zeile 2
Punkt 2: Zeile 1
Punkt 2: Zeile 2

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

AngularJS
Wiederholung

Suche…