AngularJS => ng-repeat

introduzione

La direttiva ngRepeat crea un'istanza di un modello una volta per elemento da una raccolta. La raccolta deve essere una matrice o un oggetto. Ogni istanza del modello ottiene il proprio ambito, dove la variabile del ciclo data è impostata sull'elemento della raccolta corrente e $index è impostato sull'indice o sulla chiave dell'elemento.

Sintassi

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

Parametri

Variabile	Dettagli
`$index`	offset dell'iteratore del numero dell'elemento ripetuto (0..length-1)
`$first`	booleano vero se l'elemento ripetuto è il primo nell'iteratore.
`$middle`	booleano vero se l'elemento ripetuto si trova tra il primo e l'ultimo nell'iteratore.
`$last`	booleano vero se l'elemento ripetuto è l'ultimo nell'iteratore.
`$even`	booleano vero se la posizione iteratore `$index` è pari (altrimenti false).
`$odd`	booleano true se la posizione iterator `$index` è dispari (altrimenti false).

Osservazioni

AngularJS fornisce questi parametri come variabili speciali disponibili nell'espressione ng-repeat e ovunque all'interno del tag HTML su cui vive la ng-repeat.

Iterare sulle proprietà dell'oggetto

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

Per esempio

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

Tracciamento e duplicati

ngRepeat utilizza $ watchCollection per rilevare le modifiche nella raccolta. Quando si verifica una modifica, ngRepeat esegue quindi le modifiche corrispondenti al DOM:

Quando viene aggiunto un elemento, una nuova istanza del modello viene aggiunta al DOM.
Quando un elemento viene rimosso, l'istanza del modello viene rimossa dal DOM.
Quando gli articoli vengono riordinati, i rispettivi modelli vengono riordinati nel DOM.

duplicati

track by per qualsiasi elenco che possa includere valori duplicati.
track by accelera anche le modifiche delle liste in modo significativo.
Se in questo caso non si usa la funzione track by , si ottiene l'errore: [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 gestisce più elementi con ng-repeat-start e 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>

Produzione:

Elementi
Elemento 1: riga 1
Elemento 1: riga 2
Articolo 2: Riga 1
Elemento 2: riga 2

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

AngularJS
ng-repeat

Ricerca…