AngularJS ng-repeat Direktiva s primjerom

Direktiva ng-repeat u AngularJS

The ng-ponovi Direktiva U AngularJS-u se koristi za prikaz ponavljajućih vrijednosti definiranih u kontroleru. Ponekad trebamo prikazati popis stavki u pogledu, a ng-repeat prikazuje popis definiran u kontroleru na stranici pogleda.

⚠️ Obavijest za podršku: AngularJS dosegnut kraj životnog vijeka 31. prosinca 2021. i ne prima daljnje zakrpe ili sigurnosne ispravke. Donja direktiva ostaje točna za održavanje postojećih AngularJS 1.x aplikacija; u modernom Kutni ekvivalent je *ngFor strukturna direktiva.

Primjer AngularJS ng-repeat direktive

Pogledajmo primjer direktive ng-repeat u AngularJS-u:

<!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 Objašnjenje:

1. u kontrolor, prvo definiramo niz stavki popisa koje će se prikazivati ​​u prikazu. Ovdje niz pod nazivom TopicNames sadrži tri stavke, svaka par ime-vrijednost.
2. Niz je izravno dodijeljen $scope.TopicNames, što ga čini dostupnim pogledu vezanom za ovaj kontroler.
3. HTML oznake <ul> (neuređeni popis) i <li> (stavka popisa) prikazuje stavke. Direktiva ng-repeat iterira kroz svaki unos u nizu i tpname je lokalna varijabla koja sadrži trenutni element, dakle {{tpname.name}} ispisuje njegovo svojstvo imena.

⚠️ Ispravak: Izvorno objašnjenje je navodilo da je niz „dodan članskoj varijabli pod nazivom topics„. Takva varijabla ne postoji u kodu — niz je izravno dodijeljen $scope.TopicNames, što je naziv na koji se prikaz odnosi. Uvođenje drugog naziva ovdje je čest uzrok praznog popisa.

Ako je kod uspješno izvršen, u pregledniku se prikazuje sljedeći izlaz.

AngularJS više kontrolera

Ranije smo vidjeli jedan kontroler u kojem je jedna metoda obrađivala i zbrajanje i oduzimanjetraccija brojeva. Umjesto toga možete koristiti više kontrolera za čišće odvajanje logike. Na primjer, jedan kontroler može raditi s brojevima, dok drugi radi s nizovima znakova.

Pogledajmo primjer definiranja više kontrolera u AngularJS aplikaciji.

<!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 Objašnjenje:

1. Definirana su dva kontrolera, firstcontroller i secondcontrollerSvaki pridružuje varijablu svojoj vlastitoj djelokrug: pname u prvom, lname u drugom.
2. U prikazu, drugi kontroler je ugniježđen unutar prvog, a izraz glasi lname iz unutarnjeg opsega. Budući da ugniježđeni kontroler nasljeđuje od svog roditelja, {{pname}} bi se i ovdje riješilo - nasljeđivanje teče prema dolje, nikada prema gore.

Ako je kod uspješno izvršen, tekst drugi kontroler .

Kako koristiti track by s ng-ponavljanjem

Najčešći kvar ng-repeat je greška Duplicates in a repeater are not allowedPojavljuje se u trenutku kada kolekcija sadrži istu vrijednost dva puta i potpuno zaustavlja renderiranje liste.

Uzrok je identitet trackralj. AngularJS treba stabilan ključ za svaku stavku kako bi mogao ponovno koristiti DOM čvorove umjesto da ih ponovno izgrađuje pri svakom sažetku. Prema zadanim postavkama koristi samu vrijednost stavke, pa se dvije identične vrijednosti sudaraju.

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

Izbor između dva oblika važniji je nego što se na prvi pogled čini. Tracking by $index uvijek rješava grešku, jer je pozicija jedinstvena po definiciji, ali svaki DOM čvor veže za utor, a ne za zapis. Promjena redoslijeda ili filtriranje kolekcije zatim ponovno koristi pogrešne čvorove, što se prikazuje kao polja za unos koja ostajuping tekst prethodnog retka.

Tracking putem pravog identifikatora kao što je topic.id to u potpunosti izbjegava. AngularJS može pratiti svaki zapis dok se pomiče, pa mijenja redoslijed postojećih čvorova umjesto da ih uništava i ponovno gradi. Na dugim listama ovo je također znatno brže, jer ponovno renderiranje dotiče samo retke koji su se zapravo promijenili. Koristite $index samo za nizove običnih vrijednosti koji se nikada ne preuređuju.

Posebna svojstva dostupna unutar ng-repeat

Svaka iteracija ng-repeat otkriva nekoliko svojstava samo za čitanje na vlastitom podređenom opsegu. Ona opisuju gdje se trenutna stavka nalazi unutar kolekcije, što pokriva numeriranje, izmjenične stilove i separatore bez dodavanja ikakvog dodatnog stanja kontroleru.

Tipična upotreba ih kombinira s ng-klasom za zebra strips.ping, kao u ng-class="{'row-alt': $odd}"ili s ng-if za prikaz razdjelnika u svakom retku osim zadnjeg, napisanog ng-if="!$last"Prikaz broja retka koji je čitljiv ljudima je jednostavno {{$index + 1}}, budući da je indeks baziran na nuli. Svih šest svojstava automatski se ponovno izračunava kad god se kolekcija promijeni, tako da ništa ne treba ručno ponovno izračunavati.

Uobičajene ng-repeat greške i kako ih ispraviti

Većina problema s ng-repeat dolazi od dupliciranih vrijednosti, nasljeđivanja opsega ili od direktive koja se nalazi na pogrešnom elementu. Svaki simptom u nastavku imenuje svoj uzrok.

• Duplikati u repetitoru nisu dopušteni: kolekcija sadrži ponovljenu vrijednost. Dodaj track by $index, ili bolje, track by jedinstvena nekretnina.
• Popis ne prikazuje ništa: Naziv u prikazu ne odgovara svojstvu na opsegu. Ispišite kolekciju s {{TopicNames}} kako bi se potvrdilo da je stiglo.
• Svaki element se ponavlja, uključujući i omotač: ng-repeat je postavljen na kontejner, a ne na stavku. Premjestite ga u <li> or <tr>.
• Uređivanjem unosa mijenja se pogrešan redak: popis je tracked by $index dok se artikli preuređuju. Track umjesto toga stabilnim identifikatorom.
• Promjene unutar petlje se ne zadržavaju: Svaka iteracija ima svoj vlastiti podređeni opseg, pa pisanje u primitiv stvara lokalnu kopiju. Pisanje u svojstvo objekta, kao što je item.done.

Pitanja i odgovori