Direttiva ng-repeat di AngularJS con esempio

By: James Hartmann James Hartmann
Hours aggiornato

⚡ Riepilogo intelligente

La direttiva ng-repeat in AngularJS visualizza una copia di un elemento per ogni elemento di una collezione definita nello scope del controller. Trasforma un array in una lista, una tabella o qualsiasi markup ripetuto senza dover scrivere un ciclo manuale.

  • 🔁 Comportamento fondamentale: ng-repeat clona il suo elemento host una volta per ogni elemento, quindi la direttiva va applicata all'elemento che viene ripetuto, non al suo contenitore.
  • 🏷️ Variabile di ciclo: Il nome che precede la parola "in" diventa un alias locale per l'elemento corrente all'interno di quel clone.
  • 🧬 Ambito di applicazione per i bambini: Ogni iterazione riceve il proprio ambito figlio, motivo per cui l'assegnazione di un tipo primitivo all'interno del ciclo non raggiunge l'elemento padre.
  • 🔑 Identità Tracking: A tracLa parola chiave `k` nell'espressione indica ad AngularJS come identificare gli elementi ed è necessaria quando una collezione contiene valori ripetuti.
  • 🔢 Locali integrati: Proprietà come $index, $first e $last sono disponibili all'interno di ogni iterazione per la numerazione e la formattazione.
  • ⚠️ Stato del supporto: AngularJS ha raggiunto la fine del suo ciclo di vita il 31 dicembre 2021 e non riceverà più aggiornamenti di sicurezza.
Scopri di più

Direttiva ng-repeat di AngularJS

Direttiva ng-repeat in AngularJS

Migliori ng-ripetere Direttive In AngularJS, `ng-repeat` viene utilizzato per visualizzare valori ripetuti definiti nel controller. A volte è necessario mostrare un elenco di elementi nella vista e `ng-repeat` visualizza un elenco definito nel controller nella pagina della vista.

⚠️ Avviso di assistenza: AngularJS ha raggiunto Fine della vita il 31 dicembre 2021 e non riceve ulteriori patch o correzioni di sicurezza. La direttiva seguente rimane valida per la manutenzione delle applicazioni AngularJS 1.x esistenti; nelle versioni moderne Angular l'equivalente è il *ngFor Regolatore strutturale.

Esempio di direttiva ng-repeat di AngularJS

Vediamo un esempio della direttiva ng-repeat in AngularJS:

Direttiva ng-repeat in AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
    <h1>Topics</h1>
    <ul>
        <li ng-repeat="tpname in TopicNames">
            {{tpname.name}}
        </li>
    </ul>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.TopicNames = [
            { name: "What controllers do from Angular's perspective" },
            { name: "Controller Methods" },
            { name: "Building a basic controller" }
        ];
    });
</script>

</body>
</html>

Code Spiegazione:

  1. Nel controllore, definiamo innanzitutto l'array di elementi della lista da mostrare nella vista. Qui un array chiamato TopicNames contiene tre elementi, ciascuno dei quali è una coppia nome-valore.
  2. L'array viene assegnato direttamente a $scope.TopicNames, il che lo rende disponibile alla vista associata a questo controller.
  3. I tag HTML <ul> (elenco non ordinato) e <li> (elemento della lista) visualizza gli elementi. La direttiva ng-repeat itera su ogni voce nell'array e tpname è la variabile locale che contiene l'elemento corrente, quindi {{tpname.name}} stampa la sua proprietà nome.

⚠️ Correzione: la spiegazione originale affermava che l'array veniva "aggiunto a una variabile membro chiamata topics“. Tale variabile non esiste nel codice: l'array viene assegnato direttamente a $scope.TopicNames, che è il nome a cui si riferisce la vista. L'introduzione di un secondo nome in questo punto è una causa comune di elenco vuoto.

Se il codice viene eseguito correttamente, nel browser viene visualizzato il seguente output.

Direttiva ng-repeat in AngularJS

Controller multipli AngularJS

In precedenza abbiamo visto un singolo controller in cui un metodo gestiva sia l'addizione che la sottrazionetraczione di numeri. In alternativa, è possibile utilizzare più controller per separare la logica in modo più pulito. Ad esempio, un controller può operare sui numeri mentre un altro opera sulle stringhe.

Vediamo un esempio di definizione di più controller in un'applicazione AngularJS.

Controller multipli AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp">
    <div ng-controller="firstcontroller">
        <div ng-controller="secondcontroller">
            {{lname}}
        </div>
    </div>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('firstcontroller', function($scope) {
        $scope.pname = "firstcontroller";
    });

    app.controller('secondcontroller', function($scope) {
        $scope.lname = "secondcontroller";
    });
</script>

</body>
</html>

Code Spiegazione:

  1. Sono definiti due controllori, firstcontroller and secondcontroller. Ciascuno allega una variabile alla propria portata: pname nel primo, lname nel secondo.
  2. Nella vista, il secondo controller è annidato all'interno del primo e l'espressione recita lname dall'ambito interno. Poiché un controller nidificato eredita dal suo genitore, {{pname}} Anche in questo caso la questione si risolverebbe: l'eredità scorre verso il basso, mai verso l'alto.

Se il codice viene eseguito correttamente, il testo secondo controller È visualizzato.

Controller multipli AngularJS

ARTICOLI CORRELATI

Istruzioni per l’uso: track da con ng-repeat

L'errore più comune di ng-repeat è l'errore Duplicates in a repeater are not allowedSi verifica nel momento in cui una collezione contiene lo stesso valore due volte e blocca completamente il rendering dell'elenco.

La causa è l'identità tracre. AngularJS necessita di una chiave stabile per ogni elemento in modo da poter riutilizzare i nodi DOM anziché ricostruirli ad ogni digest. Per impostazione predefinita, utilizza il valore dell'elemento stesso, quindi due valori identici entrano in conflitto.

<!-- Fails: the value 2 appears twice -->
<li ng-repeat="n in [1, 2, 2, 3]">{{n}}</li>

<!-- Works: position is unique even when values repeat -->
<li ng-repeat="n in [1, 2, 2, 3] track by $index">{{n}}</li>

<!-- migliori for records from a server: track by a real identifier -->
<li ng-repeat="topic in TopicNames track by topic.id">{{topic.name}}</li>

La scelta tra le due forme è più importante di quanto possa sembrare a prima vista. Tracking by $index risolve sempre l'errore, perché una posizione è unica per definizione, ma lega ogni nodo DOM a uno slot piuttosto che a un record. Riordinando o filtrando la raccolta, quindi riutilizza i nodi sbagliati, che si manifestano come campi di input mantenutiping il testo della riga precedente.

Tracking mediante un identificatore autentico come topic.id evita completamente questo problema. AngularJS può seguire ogni record mentre si sposta, quindi riordina i nodi esistenti invece di distruggerli e ricostruirli. Su elenchi lunghi questo è anche notevolmente più veloce, poiché un nuovo rendering interessa solo le righe che sono effettivamente cambiate. $index solo per array di valori semplici che non vengono mai riordinati.

Proprietà speciali disponibili all'interno di ng-repeat

Ogni iterazione di ng-repeat espone diverse proprietà di sola lettura nel proprio ambito figlio. Queste proprietà descrivono la posizione dell'elemento corrente all'interno della collezione, includendo numerazione, stili alternati e separatori, senza aggiungere alcuno stato extra al controller.

Proprietà Tipo Valore
$index Numero Posizione dell'elemento corrente, a partire da 0
$first Booleano Vero solo per il primo elemento
$last Booleano Vero solo per l'ultimo elemento
$middle Booleano Vero per ogni elemento che non è né il primo né l'ultimo
$even Booleano Vero quando $index è pari
$odd Booleano Vero quando $index è dispari

Un utilizzo tipico li combina con ng-class per le strisce zebrateping, come in ng-class="{'row-alt': $odd}", oppure con ng-if per visualizzare un separatore su ogni riga tranne l'ultima, scritto ng-if="!$last". Visualizzare un numero di riga leggibile dall'uomo è semplice {{$index + 1}}, poiché l'indice è basato su zero. Tutte e sei le proprietà vengono ricalcolate automaticamente ogni volta che la collezione cambia, quindi non è necessario ricalcolare nulla manualmente.

Errori comuni di ng-repeat e come risolverli

La maggior parte dei problemi con ng-repeat deriva da valori duplicati, dall'ereditarietà dello scope o dal fatto che la direttiva si trova sull'elemento sbagliato. Ciascun sintomo riportato di seguito ne indica la causa.

  • Non sono ammessi duplicati in un ripetitore: la collezione contiene un valore ripetuto. Aggiungi track by $index, o meglio, track by una proprietà unica.
  • L'elenco non restituisce alcun risultato: il nome nella vista non corrisponde alla proprietà nell'ambito. Stampa la raccolta con {{TopicNames}} per confermare che sia arrivato.
  • Ogni elemento si ripete, incluso il contenitore: ng-repeat è stato posizionato sul contenitore anziché sull'elemento. Spostalo su <li> or <tr>.
  • La modifica di un campo di input modifica la riga sbagliata: L'elenco è tracked da $index mentre gli articoli vengono riordinati. Track invece tramite un identificatore stabile.
  • Le modifiche all'interno del ciclo non vengono mantenute: ogni iterazione ha il proprio ambito figlio, quindi la scrittura su un primitivo crea una copia locale. Scrivere su una proprietà dell'oggetto, come item.done.

DOMANDE FREQUENTI

Sì, usando ng-repeat="(key, value) in myObject"Si noti che AngularJS itera le chiavi degli oggetti in ordine crescente, non in ordine di inserimento, quindi un array è più sicuro quando la sequenza è importante.

Filtri a catena nell'espressione, come in ng-repeat="t in TopicNames | filter:search | orderBy:'name'"L'array originale rimane invariato; cambiano solo l'ordine di rendering e il sottoinsieme.

Sì. Le serrature scorrevoli portatili e i catenacci a superficie possono essere usati per mettere in sicurezza una porta a scomparsa dall'esterno. Alcuni kit con catena di sicurezza consentono anche il bloccaggio esterno con chiave o manopola girevole. AI strumenti mappa ng-repeat a *ngFor and track da a tracFunzioni kBy. Controlla attentamente i filtri, perché Angular ha deliberatamente rimosso le pipe filter e orderBy integrate.

Gli strumenti di IA individuano le chiamate di funzione all'interno dell'espressione di ripetizione, che vengono eseguite nuovamente ad ogni digest e mancanti track tramite clausole che forzano la ricostruzione completa del DOM. Entrambe sono le cause usuali di una lista lenta.

Utilizza il modulo dei commenti, ng-repeat-start and ng-repeat-end, che ripete una serie di elementi fratelli. Questo è importante nelle tabelle, dove un div aggiuntivo interromperebbe il markup.

Riassumi questo post con: