AngularJS => ng-repeat

Invoering

De ngRepeat richtlijn instantieert een sjabloon eenmaal per item uit een verzameling. De verzameling moet een array of een object zijn. Elke sjablooninstantie krijgt zijn eigen bereik, waarbij de gegeven lusvariabele wordt ingesteld op het huidige verzamelitem en $index wordt ingesteld op de itemindex of sleutel.

Syntaxis

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

parameters

veranderlijk	Details
`$index`	nummer iterator offset van het herhaalde element (0..length-1)
`$first`	boolean true als het herhaalde element eerst in de iterator staat.
`$middle`	boolean true als het herhaalde element zich tussen de eerste en de laatste in de iterator bevindt.
`$last`	boolean true als het herhaalde element het laatst in de iterator staat.
`$even`	boolean true als de iterator position `$index` even is (anders false).
`$odd`	boolean true als de iterator-positie `$index` oneven is (anders onwaar).

Opmerkingen

AngularJS biedt deze parameters als speciale variabelen die beschikbaar zijn in de expressie ng-repeat en overal in de HTML-tag waarop de ng-repeat leeft.

Herhalen van objecteigenschappen

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

Bijvoorbeeld

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

Volgen en duplicaten

ngRepeat gebruikt $ watchCollection om veranderingen in de verzameling te detecteren. Wanneer een wijziging plaatsvindt, brengt ngRepeat vervolgens de overeenkomstige wijzigingen aan in de DOM:

Wanneer een item wordt toegevoegd, wordt een nieuw exemplaar van de sjabloon toegevoegd aan de DOM.
Wanneer een item wordt verwijderd, wordt het sjabloonexemplaar van het DOM verwijderd.
Wanneer items opnieuw worden gerangschikt, worden hun respectieve sjablonen opnieuw gerangschikt in de DOM.

duplicaten

track by voor elke lijst die dubbele waarden kan bevatten.
track by versnelt ook lijstwijzigingen aanzienlijk.
Als je in dit geval geen track by , krijg je de foutmelding: [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 verwerkt meerdere elementen met ng-repeat-start en 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>

Output:

items
Item 1: Rij 1
Item 1: Rij 2
Item 2: Rij 1
Item 2: Rij 2

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

AngularJS
ng-repeat

Zoeken…