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
Generare velocemente pagine CRUD in Blazor con QuickGrid
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Gestire la cancellazione di una richiesta in streaming da Blazor
Implementare l'infinite scroll con QuickGrid in Blazor Server
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione
Potenziare la ricerca su Cosmos DB con Full Text Search
Eliminare una project wiki di Azure DevOps
Utilizzare DeepSeek R1 con Azure AI
Anonimizzare i dati sensibili nei log di Azure Front Door
Creare una libreria CSS universale: Clip-path
Ottimizzazione dei block template in Angular 17
I più letti di oggi
- Anonimizzare i dati sensibili nei log di Azure Front Door
- Annunciato Visual Studio 2013: la prima preview a fine mese a Build
- Loggare le query più lente con Entity Framework
- Utilizzare WhenEach per processare i risultati di una lista di task
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!