La direttiva ng-repeat consente di instanziare un template per ciascun elemento della collection specifica: ogni istanza del template ha il suo scope. Eccone un esempio:
<div ng-repeat="item in items">...</div>
Quando il contenuto della collection cambia, ng-repeat tiene traccia del cambiamento, sincronizzando sempre la lista e generando, aggiornando o rimuovendo i relativi oggetti creati all'interno del DOM.
La direttiva tiene già conto di eventuali duplicazioni, evitando di ripetere la visualizzazione. Questo comportamento può essere disattivato facendo uso dell'espressione track by:
<div ng-repeat="item in items track by $index">...</div>
Oltre ad $index, che rappresenta l'indice, può essere passata un'arbitraria funzione per garantire l'univocità.
Con lo stesso approccio è possibile specificare anche un criterio di ordinamento (track by deve restare l'ultima espressione):
<div ng-repeat="item in items | orderBy: 'name' as myItems track by $index">...</div>
E, analogamente, possiamo specificare un criterio di filtro:
<div ng-repeat="item in items | filter: myFilter as myItems">...</div>
Ecco un esempio completo( e mutuato dallo script precedente), dove possiamo filtrare in tempo reale le voci semplicemente scrivendo nella form:
<p>{{people.length}} persone.</p>
<input type="search" ng-model="searchKey" placeholder="cerca amici..." />
<ul> <li ng-repeat="p in people | filter:searchKey as results">
[{{$index + 1}}]
<span>{{p.name}}</span>
<p>{{p.age}}</p>
</li>
<li ng-if="results.length == 0"><strong>Nessun risultato...</strong></li>
</ul>Per approfondimenti:
#137 - La prima Single Page Application con AngularJS
https://www.html5italia.com/script/137/Single-Page-Application-AngularJS.aspx
#138 - Creare un modulo e un controller con AngularJS
https://www.html5italia.com/script/138/Creare-Modulo-Controller-AngularJS.aspx
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Impostare la content-visibility in CSS per ottimizare il rendering iniziale di una pagina
Usare il metodo nameof con un tipo generico in C# 14
Analizzare il contenuto di una issue con GitHub Models e AI
Dallo sviluppo locale ad Azure con .NET Aspire
Ottimizzare la content-visibility in CSS specificando lo spazio da occupato dall'area non renderizzata
Esporre un server MCP esistente con Azure API Management
Testare le API di Azure Resource Manager con API Playground
Gestire pubblicazione Kubernetes tramite .NET Aspire
Ricerca delle GitHub issue tramite operatori logici
Impostare il tipo di supporto dei campi Json in Entity Framework con Sql Server
Il nuovo persistent state in Blazor
Supporto nativo a JSON in SQL Server 2025


