ng-repeat

19 maggio 2015

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.

Tutte le lezioni

1 ... 9 10 11 ... 38

Se vuoi aggiornamenti su ng-repeat inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su ng-repeat

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy