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
Utilizzare Model as a Service su Microsoft Azure
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Disabilitare automaticamente un workflow di GitHub
Creare una libreria CSS universale: i bottoni
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Evitare il flickering dei componenti nel prerender di Blazor 8
Utilizzare gRPC su App Service di Azure
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Migliorare la scalabilità delle Azure Function con il Flex Consumption
Potenziare Azure AI Search con la ricerca vettoriale
I più letti di oggi
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
- Creare una libreria CSS universale: Cards
- Eseguire script pre e post esecuzione di un workflow di GitHub