AngularJS => ng-repeat

Introduction

La directive ngRepeat instancie un modèle une fois par article d'une collection. La collection doit être un tableau ou un objet. Chaque instance de modèle reçoit sa propre étendue, où la variable de boucle donnée est définie sur l'élément de collection en cours et $index est défini sur l'index ou la clé de l'élément.

Syntaxe

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

Paramètres

Variable	Détails
`$index`	offset de l'itérateur de nombre de l'élément répété (0..length-1)
`$first`	booléen true si l'élément répété est le premier dans l'itérateur.
`$middle`	booléen true si l'élément répété est entre le premier et le dernier dans l'itérateur.
`$last`	booléen true si l'élément répété est le dernier dans l'itérateur.
`$even`	booléen true si la position `$index` l'itérateur `$index` est pair (sinon faux).
`$odd`	booléen true si la position `$index` l'itérateur `$index` est impair (sinon faux).

Remarques

AngularJS fournit ces paramètres sous la forme de variables spéciales disponibles dans l'expression ng-repeat et à l'intérieur de la balise HTML sur laquelle la ng-repeat se déroule.

Itération sur les propriétés de l'objet

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

Par exemple

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

Suivi et doublons

ngRepeat utilise $ watchCollection pour détecter les modifications dans la collection. Lorsqu'un changement se produit, ngRepeat effectue alors les modifications correspondantes dans le DOM:

Lorsqu'un élément est ajouté, une nouvelle instance du modèle est ajoutée au DOM.
Lorsqu'un élément est supprimé, son instance de modèle est supprimée du DOM.
Lorsque les articles sont réorganisés, leurs modèles respectifs sont réorganisés dans le DOM.

Doublons

track by toute liste pouvant inclure des valeurs en double.
track by accélère également considérablement les changements de liste.
Si vous n'utilisez pas track by dans ce cas, vous obtenez l'erreur suivante: [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 gère plusieurs éléments avec ng-repeat-start et 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>

Sortie:

Articles
Point 1: Rangée 1
Point 1: Rangée 2
Item 2: Rangée 1
Item 2: Rangée 2

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

AngularJS
ng-repeat

Recherche…