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
Stop alle password con Azure Managed Identity
Escludere alcuni file da GitHub Copilot
Planning & Specification Driven Development + GitHub Copilot
Definire il metodo di rilascio in .NET Aspire
Creare una UI per i tool MCP con resource e Azure Functions
Effettuare la ricerca di testo nascosto in una pagina web con Javascript
Utilizzo di CSS Scroll Snap per realizzare un carousel
Cache temporanea in Javascript con oggetti
Usare i generics di C# con la clausola nameof in modo semplificato
Effettuare chiamate API tramite GitHub App
From Data to Insight: Exploratory Data Analysis with Python, VS Code and SQL MCP Server


