Uso della direttiva ng-repeat in AngularJS

di Daniele Bochicchio, in HTML5, AngularJS,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi