AngularJS ng-repeat-richtlijn met voorbeeld

ng-repeat-richtlijn in AngularJS

De ng-herhalen Richtlijnen In AngularJS wordt `ng-repeat` gebruikt om herhalende waarden weer te geven die in de controller zijn gedefinieerd. Soms moeten we een lijst met items in de weergave tonen, en `ng-repeat` rendert een lijst die in de controller is gedefinieerd op een weergavepagina.

⚠️ Ondersteuningsbericht: AngularJS bereikte einde levensduur op 31 december 2021 en ontvangt geen verdere patches of beveiligingsupdates. De onderstaande richtlijn blijft van toepassing voor het onderhouden van bestaande AngularJS 1.x-applicaties; in moderne gevallen Angular het equivalent is de *ngFor structurele richtlijn.

AngularJS ng-repeat richtlijnvoorbeeld

Laten we eens kijken naar een voorbeeld van de ng-repeat-richtlijn 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 Uitleg:

1. In de controleurEerst definiëren we de array met lijstitems die in de weergave moeten worden getoond. Hier een array genaamd TopicNames Bevat drie items, elk een naam-waardepaar.
2. De array wordt rechtstreeks toegewezen aan $scope.TopicNameswaardoor het beschikbaar komt voor de weergave die aan deze controller is gekoppeld.
3. De HTML-tags <ul> (ongeordende lijst) en <li> (lijstitem) toon de items. De ng-repeat-richtlijn doorloopt elk item in de array, en tpname is de lokale variabele die het huidige item bevat, dus {{tpname.name}} print de naam van de eigenschap.

⚠️ Correctie: De oorspronkelijke uitleg vermeldde dat de array werd "toegevoegd aan een lidvariabele genaamd topics“Een dergelijke variabele bestaat niet in de code — de array wordt rechtstreeks toegewezen aan $scope.TopicNames, wat de naam is waarnaar de weergave verwijst. Het toevoegen van een tweede naam is een veelvoorkomende oorzaak van een lege lijst.

Als de code succesvol wordt uitgevoerd, wordt de volgende uitvoer in de browser weergegeven.

AngularJS Meerdere controllers

Eerder zagen we een enkele controller waarin één methode zowel optellen als aftrekken afhandelde.tracverwerking van getallen. Je kunt in plaats daarvan meerdere controllers gebruiken om de logica overzichtelijker te scheiden. Zo kan de ene controller bijvoorbeeld getallen verwerken, terwijl een andere strings verwerkt.

Laten we eens kijken naar een voorbeeld van het definiëren van meerdere controllers in een AngularJS-applicatie.

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

1. Er zijn twee controllers gedefinieerd, firstcontroller en secondcontrollerElk koppelt een variabele aan zijn eigen omvang: pname in de eerste, lname in de seconde.
2. In de weergave is de tweede controller genest in de eerste, en de expressie luidt: lname vanuit de interne scope. Omdat een geneste controller overerft van zijn oudercontroller, {{pname}} Dat zou hier ook het geval zijn: erfgoed stroomt van boven naar beneden, nooit van onder naar boven.

Als de code succesvol wordt uitgevoerd, wordt de tekst tweede controller is uitgestald.

Hoe te gebruiken track door met ng-repeat

De meest voorkomende fout bij ng-repeat is de volgende foutmelding: Duplicates in a repeater are not allowedHet probleem treedt op zodra een verzameling twee keer dezelfde waarde bevat, waardoor de weergave van de lijst volledig stopt.

De oorzaak is identiteit. tracAngularJS heeft een stabiele sleutel nodig voor elk item, zodat het DOM-nodes kan hergebruiken in plaats van ze bij elke digest opnieuw op te bouwen. Standaard gebruikt het de itemwaarde zelf, waardoor twee identieke waarden conflicteren.

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

De keuze tussen de twee vormen is belangrijker dan het op het eerste gezicht lijkt. Tracking by $index Dit lost de fout altijd op, omdat een positie per definitie uniek is, maar het koppelt elk DOM-knooppunt aan een slot in plaats van aan een record. Het herschikken of filteren van de collectie hergebruikt vervolgens de verkeerde knooppunten, wat zich manifesteert als invoervelden die blijven hangen.ping de tekst van de vorige regel.

Tracking door middel van een authentieke identificatiecode zoals topic.id Dit voorkomt dat volledig. AngularJS kan elk record volgen terwijl het verplaatst wordt, waardoor bestaande knooppunten opnieuw worden geordend in plaats van verwijderd en opnieuw opgebouwd. Bij lange lijsten is dit ook aanzienlijk sneller, omdat een herrendering alleen de rijen aanraakt die daadwerkelijk zijn gewijzigd. Gebruik $index Alleen voor arrays met eenvoudige waarden die nooit van volgorde veranderen.

Speciale eigenschappen beschikbaar binnen ng-repeat

Elke iteratie van ng-repeat stelt verschillende alleen-lezen eigenschappen beschikbaar op zijn eigen onderliggende scope. Deze beschrijven de positie van het huidige item binnen de collectie, inclusief nummering, afwisselende stijlen en scheidingstekens, zonder extra statusinformatie aan de controller toe te voegen.

Een typisch gebruik combineert ze met ng-class voor zebra-striping, als in ng-class="{'row-alt': $odd}", of met ng-if om een ​​scheidingsteken op elke regel behalve de laatste weer te geven, geschreven ng-if="!$last"Het weergeven van een leesbaar rijnummer is eenvoudig. {{$index + 1}}Omdat de index nulgebaseerd is, worden alle zes eigenschappen automatisch opnieuw berekend wanneer de verzameling verandert. Er hoeft dus niets handmatig opnieuw berekend te worden.

Veelvoorkomende ng-repeat-fouten en hoe je ze kunt oplossen

De meeste problemen met ng-repeat worden veroorzaakt door dubbele waarden, door overerving van scopes of doordat de directive op het verkeerde element is geplaatst. Elk symptoom hieronder benoemt de bijbehorende oorzaak.

• Dubbele vermeldingen in een repeater zijn niet toegestaan: De verzameling bevat een herhaalde waarde. Toevoegen track by $index, of beter nog, track by een uniek object.
• De lijst geeft geen resultaat: De naam in de weergave komt niet overeen met de eigenschap in het bereik. Print de verzameling met {{TopicNames}} om te bevestigen dat het is aangekomen.
• Elk element wordt herhaald, inclusief de wrapper: `ng-repeat` is op de container geplaatst in plaats van op het item. Verplaats het naar de container. <li> or <tr>.
• Het bewerken van een invoerveld wijzigt de verkeerde rij: de lijst is tracgek door $index terwijl de artikelen opnieuw worden geordend. Track door middel van een stabiele identificator in plaats daarvan.
• Wijzigingen binnen de lus worden niet opgeslagen: Elke iteratie heeft zijn eigen onderliggende scope, dus schrijven naar een primitief type creëert een lokale kopie. Schrijf naar een objecteigenschap, zoals... item.done.

Veelgestelde vragen