AngularJS ng-gentag direktiv med eksempel

Af: James Hartman James Hartman
Hours Opdateret

⚡ Smart opsummering

Direktivet ng-repeat i AngularJS gengiver én kopi af et element for hvert element i en samling, der er defineret i controllerens scope. Det omdanner et array til en liste, en tabel eller enhver gentagen markup uden at skrive et manuelt loop.

  • 🔁 Kerneadfærd: ng-repeat kloner sit værtselement én gang pr. element, så direktivet hører hjemme på det element, der gentages, ikke dets container.
  • 🏷️ Loopvariabel: Navnet før ordet "in" bliver et lokalt alias for det aktuelle element i den klon.
  • 🧬 Underordnet omfang: Hver iteration modtager sit eget underordnede scope, hvilket er grunden til, at tildeling af en primitiv inde i løkken ikke når frem til forælderen.
  • 🔑 Identity Tracking: A track by expression fortæller AngularJS, hvordan elementer identificeres, og det er påkrævet, når en samling indeholder gentagne værdier.
  • 🔢 Indbyggede lokale: Egenskaber som $index, $first og $last er tilgængelige i hver iteration til nummerering og styling.
  • ⚠️ Supportstatus: AngularJS nåede slutningen af ​​sin levetid den 31. december 2021 og modtager ikke yderligere sikkerhedsrettelser.
Læs mere

AngularJS ng-repeat-direktiv

ng-gentagelsesdirektiv i AngularJS

ng-gentag Direktiv I AngularJS bruges til at vise gentagne værdier defineret i controlleren. Nogle gange har vi brug for at vise en liste over elementer i viewet, og ng-repeat gengiver en liste defineret i controlleren på en view-side.

⚠️ Supportmeddelelse: AngularJS nået levetidens afslutning den 31. december 2021 og modtager ingen yderligere programrettelser eller sikkerhedsrettelser. Direktivet nedenfor forbliver korrekt til vedligeholdelse af eksisterende AngularJS 1.x-applikationer; i moderne Vinkelforskydning det tilsvarende er *ngFor strukturdirektiv.

AngularJS ng-gentagelsesdirektiv eksempel

Lad os se på et eksempel på ng-repeat-direktivet i AngularJS:

ng-gentagelsesdirektiv i 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 Forklaring:

  1. I controller, definerer vi først det array af listeelementer, der skal vises i visningen. Her et array kaldet TopicNames indeholder tre elementer, der hver er et navn-værdi-par.
  2. Arrayet er direkte tildelt $scope.TopicNames, hvilket gør den tilgængelig for den visning, der er bundet til denne controller.
  3. HTML-tags <ul> (uordnet liste) og <li> (listeelement) viser elementerne. ng-repeat-direktivet gentager hver indgang i arrayet, og tpname er den lokale variabel, der indeholder det aktuelle element, så {{tpname.name}} udskriver dens navneegenskab.

⚠️ Rettelse: Den oprindelige forklaring angav, at arrayet blev "tilføjet til en medlemsvariabel kaldet topics". En sådan variabel findes ikke i koden — arrayet tildeles direkte til $scope.TopicNames, som er det navn, som visningen refererer til. At introducere et andet navn her er en almindelig årsag til en tom liste.

Hvis koden udføres korrekt, vises følgende output i browseren.

ng-gentagelsesdirektiv i AngularJS

AngularJS Multiple Controllere

Tidligere så vi en enkelt controller, hvor én metode håndterede både addition og subtraction af tal. Du kan i stedet bruge flere controllere til at adskille logikken mere tydeligt. For eksempel kan én controller arbejde på tal, mens en anden arbejder på strenge.

Lad os se på et eksempel på definition af flere controllere i en AngularJS-applikation.

AngularJS Multiple Controllere

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

  1. To controllere er defineret, firstcontroller og secondcontrollerHver tilknytter en variabel til sin egen rækkevidde: pname i den første, lname i det andet.
  2. I visningen er den anden controller indlejret i den første, og udtrykket læses lname fra det indre scope. Fordi en indlejret controller arver fra sin overordnede, {{pname}} ville også løses her — arv flyder nedad, aldrig opad.

Hvis koden udføres korrekt, vil teksten andencontroller vises.

AngularJS Multiple Controllere

RELATEREDE ARTIKLER

Sådan bruges den: track ved med ng-gentagelse

Den mest almindelige ng-repeat-fejl er fejlen Duplicates in a repeater are not allowedDet ser ud til, at i det øjeblik en samling indeholder den samme værdi to gange, stopper det gengivelsen af ​​listen helt.

Årsagen er identitet trackonge. AngularJS har brug for en stabil nøgle til hvert element, så det kan genbruge DOM-noder i stedet for at genopbygge dem ved hver digest. Som standard bruger det selve elementværdien, så to identiske værdier kolliderer.

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

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

At vælge mellem de to former er vigtigere end det umiddelbart ser ud til. Tracking by $index løser altid fejlen, fordi en position per definition er unik, men den binder hver DOM-node til et slot i stedet for til en post. Omarrangering eller filtrering af samlingen genbruger derefter de forkerte noder, hvilket vises som inputfelter, der ikke længere er tilgængelige.ping den forrige rækkes tekst.

Tracking ved hjælp af en ægte identifikator, såsom topic.id undgår det helt. AngularJS kan følge hver post, mens den bevæger sig, så den omarrangerer eksisterende noder i stedet for at ødelægge og genopbygge dem. På lange lister er dette også markant hurtigere, da en gengivelse kun berører de rækker, der faktisk ændrede sig. Brug $index kun for arrays af almindelige værdier, der aldrig omarrangerer.

Særlige egenskaber tilgængelige inde i ng-repeat

Hver iteration af ng-repeat eksponerer adskillige skrivebeskyttede egenskaber på sit eget underordnede scope. De beskriver, hvor det aktuelle element befinder sig i samlingen, hvilket dækker nummerering, alternerende stilarter og separatorer uden at tilføje nogen ekstra tilstand til controlleren.

Ejendom Type Værdi
$index nummer Placering af det aktuelle element, startende ved 0
$first Boolesk Kun sandt for den første vare
$last Boolesk Kun sandt for den sidste vare
$middle Boolesk Sandt for alle elementer, der hverken er først eller sidst
$even Boolesk Sandt når $index er lige
$odd Boolesk Sandt når $index er ulige

En typisk anvendelse kombinerer dem med ng-klassen til zebrastriberping, som i ng-class="{'row-alt': $odd}", eller med ng-if for at gengive en separator på hver række undtagen den sidste, skrevet ng-if="!$last"Det er simpelthen at vise et rækkenummer, der kan læses af mennesker {{$index + 1}}, da indekset er nulbaseret. Alle seks egenskaber genberegnes automatisk, når samlingen ændres, så intet behøver at genberegnes manuelt.

Almindelige ng-repeat-fejl og hvordan man retter dem

De fleste ng-repeat-problemer stammer fra duplikerede værdier, fra arv af scope eller fra direktivet, der sidder på det forkerte element. Hvert symptom nedenfor angiver dets årsag.

  • Dubletter i en repeater er ikke tilladt: Samlingen indeholder en gentaget værdi. Tilføj track by $index, eller bedre, track by en unik ejendom.
  • Listen viser ingenting: Navnet i visningen matcher ikke egenskaben på omfanget. Udskriv samlingen med {{TopicNames}} for at bekræfte, at den er ankommet.
  • Hvert element gentages, inklusive wrapperen: ng-repeat blev placeret på beholderen i stedet for på varen. Flyt den til <li> or <tr>.
  • Redigering af et input ændrer den forkerte række: listen er trackød af $index mens varer genbestilles. Track af en stabil identifikator i stedet.
  • Ændringer i løkken bevares ikke: Hver iteration har sit eget underordnede scope, så skrivning til en primitiv opretter en lokal kopi. Skriv til en objektegenskab, såsom item.done.

Ofte Stillede Spørgsmål

Ja, bruger ng-repeat="(key, value) in myObject"Bemærk at AngularJS itererer objektnøgler i sorteret rækkefølge, ikke indsættelsesrækkefølge, så et array er mere sikkert, når rækkefølgen er vigtig.

Kædefiltre i udtrykket, som i ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Det oprindelige array forbliver uændret; kun den gengivne rækkefølge og delmængden ændres.

Ja. AI værktøjer kort ng-gentag til *ngFor og track ved at trackBy-funktioner. Tjek filtrene omhyggeligt, da Angular bevidst har droppet det indbyggede filter og orderBy-pipes.

AI-værktøjer spotter funktionskald i gentagelsesudtrykket, som køres igen ved hver digest, og mangler track by-klausuler, der gennemtvinger fulde DOM-genopbygninger. Begge er de sædvanlige årsager til en træg liste.

Brug kommentarformularen, ng-repeat-start og ng-repeat-end, som gentager en række søskende elementer. Dette er vigtigt i tabeller, hvor en ekstra div ville bryde markup'en.

Opsummer dette indlæg med: