Directiva AngularJS ng-repeat cu exemplu

⚡ Rezumat inteligent

Directiva ng-repeat din AngularJS redă o copie a unui element pentru fiecare element dintr-o colecție definită în domeniul de aplicare al controlerului. Transformă un array într-o listă, un tabel sau orice markup repetitiv fără a scrie o buclă manuală.

🔁 Comportament de bază: Funcția ng-repeat clonează elementul gazdă o dată per element, deci directiva aparține elementului care se repetă, nu containerului său.
🏷️ Variabilă de buclă: Numele dinaintea cuvântului „in” devine un alias local pentru elementul curent din interiorul clonei respective.
🧬 Domeniu de aplicare pentru copii: Fiecare iterație primește propriul domeniu de aplicare pentru copil, motiv pentru care atribuirea unei primitive în interiorul buclei nu ajunge la părinte.
🔑 Identitate Tracking: A track by expression îi spune lui AngularJS cum să identifice elementele și este necesară atunci când o colecție conține valori repetate.
🔢 Localuri încorporate: Proprietăți precum $index, $first și $last sunt disponibile în fiecare iterație pentru numerotare și stilizare.
⚠️ Starea asistenței: AngularJS a ajuns la sfârșitul perioadei de funcționare pe 31 decembrie 2021 și nu mai primește alte corecții de securitate.

Citește mai mult

Directiva ng-repeat în AngularJS

ng-repetă directivă în AngularJS este folosit pentru a afișa valori repetitive definite în controller. Uneori trebuie să afișăm o listă de elemente în vizualizare, iar ng-repeat randează o listă definită în controller pe o pagină de vizualizare.

⚠️ Notificare de asistență: AngularJS a atins sfârșitul duratei de viață la 31 decembrie 2021 și nu primește alte corecții sau corecții de securitate. Directiva de mai jos rămâne corectă pentru menținerea aplicațiilor AngularJS 1.x existente; în versiunile moderne Unghiular echivalentul este *ngFor directivă structurală.

Exemplu de directivă AngularJS ng-repeat

Să luăm un exemplu de directivă ng-repeat în 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 Explicaţie:

În controlor, definim mai întâi matricea de elemente ale listei care vor fi afișate în vizualizare. Aici, o matrice numită TopicNames conține trei elemente, fiecare o pereche nume-valoare.
Matricea este atribuită direct $scope.TopicNames, ceea ce îl face disponibil pentru vizualizarea legată de acest controler.
Etichetele HTML <ul> (listă neordonată) și <li> (element listă) afișează elementele. Directiva ng-repeat iterează peste fiecare intrare din matrice și tpname este variabila locală care conține elementul curent, deci {{tpname.name}} afișează proprietatea sa name.

⚠️ Corecție: Explicația inițială preciza că matricea a fost „adăugată la o variabilă membru numită topics„. Nu există o astfel de variabilă în cod — matricea este atribuită direct $scope.TopicNames, care este numele la care se referă vizualizarea. Introducerea unui al doilea nume aici este o cauză frecventă a unei liste goale.

Dacă codul este executat cu succes, următorul rezultat este afișat în browser.

Controlere multiple AngularJS

Anterior am văzut un singur controler în care o metodă gestiona atât adunarea, cât și subunitatea.tracțiune de numere. În schimb, puteți utiliza mai multe controlere pentru a separa logica mai clar. De exemplu, un controler poate opera asupra numerelor, în timp ce altul operează asupra șirurilor de caractere.

Să luăm în considerare un exemplu de definire a mai multor controllere într-o aplicație 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 Explicaţie:

Sunt definiți doi controleri, firstcontroller și secondcontrollerFiecare atașează o variabilă propriei variabile domeniu: pname in primul, lname in secunda.
În vizualizare, al doilea controler este imbricat în primul, iar expresia este lname din domeniul de aplicare intern. Deoarece un controler imbricat moștenește de la părintele său, {{pname}} s-ar rezolva și aici — moștenirea se desfășoară în jos, niciodată în sus.

Dacă codul este executat cu succes, textul al doilea controlor este afisat.

Instrucțiuni de utilizare track de cu ng-repeat

Cea mai frecventă eroare ng-repeat este eroarea Duplicates in a repeater are not allowedSe pare că în momentul în care o colecție conține aceeași valoare de două ori, redarea listei se oprește complet.

Cauza este identitatea tracrege. AngularJS are nevoie de o cheie stabilă pentru fiecare element, astfel încât să poată reutiliza nodurile DOM în loc să le reconstruiască la fiecare digest. În mod implicit, folosește valoarea elementului în sine, astfel încât două valori identice se ciocnesc.

<!-- 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>

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

Alegerea între cele două forme contează mai mult decât pare la prima vedere. Tracking by $index rezolvă întotdeauna eroarea, deoarece o poziție este unică prin definiție, dar leagă fiecare nod DOM de un slot mai degrabă decât de o înregistrare. Reordonarea sau filtrarea colecției reutilizează apoi nodurile greșite, care apar ca și câmpuri de intrare keeping textul rândului anterior.

Tracking printr-un identificator autentic, cum ar fi topic.id evită complet acest lucru. AngularJS poate urmări fiecare înregistrare pe măsură ce se mișcă, astfel încât reordonează nodurile existente în loc să le distrugă și să le reconstruiască. Pe listele lungi, acest lucru este, de asemenea, semnificativ mai rapid, deoarece o re-randare atinge doar rândurile care s-au modificat efectiv. Folosește $index numai pentru tablouri de valori simple care nu se reordonează niciodată.

Proprietăți speciale disponibile în ng-repeat

Fiecare iterație a funcției ng-repeat expune mai multe proprietăți read-only în propriul domeniu de aplicare copil. Acestea descriu unde se află elementul curent în cadrul colecției, ceea ce acoperă numerotarea, stilurile alternative și separatoarele fără a adăuga nicio stare suplimentară controlerului.

Proprietatea	Tip	Valoare
`$index`	Număr	Poziția elementului curent, începând de la 0
`$first`	boolean	Adevărat doar pentru primul element
`$last`	boolean	Adevărat doar pentru ultimul element
`$middle`	boolean	Adevărat pentru fiecare element care nu este nici primul, nici ultimul
`$even`	boolean	Adevărat când $index este par
`$odd`	boolean	Adevărat când $index este impar

O utilizare tipică le combină cu clasa ng pentru striații zebră.ping, ca în ng-class="{'row-alt': $odd}", sau cu ng-if pentru a reda un separator pe fiecare rând, cu excepția ultimului, scris ng-if="!$last"Afișarea unui număr de rând lizibil de către om este pur și simplu {{$index + 1}}, deoarece indicele are bază zero. Toate cele șase proprietăți sunt recalculate automat ori de câte ori colecția se modifică, deci nu trebuie recalculat nimic manual.

Erori frecvente ng-repeat și cum să le remediați

Majoritatea problemelor legate de ng-repeat provin din valori duplicate, din moștenirea domeniului de aplicare sau din faptul că directiva se află pe elementul greșit. Fiecare simptom de mai jos își numește cauza.

Duplicatele într-un repetor nu sunt permise: colecția deține o valoare repetată. Adăugați track by $index, sau mai bine, track by o proprietate unică.
Lista nu afișează nimic: Numele din vizualizare nu se potrivește cu proprietatea din domeniu. Afișează colecția cu {{TopicNames}} pentru a confirma că a sosit.
Fiecare element se repetă, inclusiv învelișul: ng-repeat a fost plasat pe recipient și nu pe articol. Mutați-l în <li> or <tr>.
Editarea unei intrări modifică rândul greșit: lista este tracde $index în timp ce articolele se rearanjează. Track printr-un identificator stabil în schimb.
Modificările din interiorul buclei nu persistă: fiecare iterație are propriul domeniu de aplicare copil, așadar scrierea într-o primitivă creează o copie locală. Scrieți într-o proprietate a obiectului, cum ar fi item.done.

Întrebări frecvente

Da, folosind ng-repeat="(key, value) in myObject"Rețineți că AngularJS iterează cheile obiectelor în ordine sortată, nu în ordinea de inserare, deci un array este mai sigur atunci când secvența contează.

Filtre în lanț în expresie, ca în ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Matricea originală este neschimbată; se modifică doar ordinea redată și subsetul.

Da. AI instrumente hartă ng-repeat la *ngFor și track de către tracFuncții kBy. Verificați cu atenție filtrele, deoarece Angular a eliminat în mod deliberat filtrul încorporat și pipe-urile orderBy.

Instrumentele AI identifică apelurile de funcții din interiorul expresiei repeat, care se rulează din nou la fiecare digest, și apelurile lipsă track prin clauze care forțează reconstrucții complete ale DOM-ului. Ambele sunt cauzele obișnuite ale unei liste lente.

Folosește formularul de comentarii, ng-repeat-start și ng-repeat-end, care repetă o serie de elemente surori. Acest lucru este important în tabele, unde un div suplimentar ar întrerupe marcajul.