Una delle direttive più interessanti messe a disposizione da Angular è ng-repeat. Questa direttiva consente di generare un elenco di elementi HTML a partire da una collezione di dati. Supponiamo ad esempio di avere un array di nomi:
$scope.elencoNomi = ["Andrea", "Marco", "Giovanni", "Roberto"];Possiamo visualizzare l'elenco dei nomi in una lista non ordinata sfruttando ng-repeat nel seguente modo:
<ul>
<li ng-repeat="nome in elencoNomi">{{nome}}</li>
</ul>L'espressione associata alla direttiva fa riferimento all'elenco da cui prelevare i valori da visualizzare (elencoNomi) e definisce una variabile (nome) che rappresenta l'elemento corrente dell'array.
Il risultato è l'elenco dei nomi contenuti nell'array:
$scope.persone = [
{ nome: "Andrea", cognome: "Rossi", citta: "Roma" },
{ nome: "Marco", cognome: "Verdi", citta: "Milano" },
{ nome: "Giovanni", cognome: "Neri", citta: "Napoli" },
{ nome: "Roberto", cognome: "Gialli", citta: "Palermo" }
];e visualizzare le proprietà desiderate:
<ul>
<li ng-repeat="persona in persone">
{{persona.nome}} {{persona.cognome}}
</li>
</ul>La direttiva ng-repeat definisce per ciascun elemento generato una variabile di scope $index che rappresenta l'indice corrente. Questa variabile può risultare utile in determinate situazioni. Ad esempio, se vogliamo visualizzare un contatore a fianco ai dati visualizzati possiamo procedere nel seguente modo:
<ul>
<li ng-repeat="persona in persone">
N. {{$index}} - {{persona.nome}} {{persona.cognome}}
</li>
</ul>L'indice parte naturalmente da zero.
Oltre che per semplici elenchi, la direttiva ng-repeat si presta bene per la creazione di tabelle anche complesse. Il seguente esempio mostra come visualizzare l'elenco delle persone in forma tabellare:
<table>
<tr><th>Indice</th><th>Nome</th><th>Cognome</th><th>Città</th></tr>
<tr ng-repeat="persona in persone">
<td>{{$index}}</td><td>{{persona.nome}}</td><td>{{persona.cognome}}</td><td>{{persona.citta}}</td>
</tr>
</table>Il risultato ottenuto sarà il seguente:
Una sintassi speciale può essere utilizzata per iterare sulle proprietà di un oggetto. Ad esempio, se vogliamo visualizzare proprietà e valore di un oggetto persona scriveremo il seguente codice:
$scope.persona = { nome: "Mario", cognome: "Rossi", citta: "Roma"};e poi...
<ul>
<li ng-repeat="(key, value) in persona">
Proprietà: {{key}}<br/>
Valore: {{value}}
</li>
</ul>Ricordiamo che, come per tutte le direttive, rimane un legame attivo tra i dati del modello e la loro visualizzazione sulla view. Pertanto, ogni modifica alla collezione di dati su cui si basa la direttiva ng-repeat si rifletterà automaticamente in una modifica al risultato sulla view.