AngularJS ng-repeat Direktiva s primjerom

By: James Hartman James Hartman
Hours Aลพurirano

โšก Pametni saลพetak

Direktiva ng-repeat u AngularJS-u prikazuje jednu kopiju elementa za svaku stavku u kolekciji definiranoj na podruฤju kontrolera. Pretvara niz u listu, tablicu ili bilo koju ponavljajuฤ‡u oznaku bez pisanja ruฤne petlje.

  • ๐Ÿ” Osnovno ponaลกanje: ng-repeat klonira svoj glavni element jednom po stavci, tako da direktiva pripada elementu koji se ponavlja, a ne njegovom spremniku.
  • ๐Ÿท๏ธ Varijabla petlje: Naziv prije rijeฤi `in` postaje lokalni alias za trenutnu stavku unutar tog klona.
  • ๐Ÿงฌ Podreฤ‘eni opseg: Svaka iteracija dobiva svoj vlastiti podreฤ‘eni opseg, zbog ฤega dodjeljivanje primitive unutar petlje ne dopire do roditelja.
  • ๐Ÿ”‘ Identitet Tracking: A tracIzraz k govori AngularJS-u kako identificirati elemente i potreban je kada kolekcija sadrลพi ponovljene vrijednosti.
  • ๐Ÿ”ข Ugraฤ‘eni lokalni pretrage: Svojstva poput $index, $first i $last dostupna su unutar svake iteracije za numeriranje i stiliziranje.
  • โš ๏ธ Status podrลกke: AngularJS je dosegao kraj podrลกke 31. prosinca 2021. i ne prima daljnje sigurnosne zakrpe.
Proฤitaj viลกe

AngularJS ng-repeat direktiva

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:

Direktiva ng-repeat u 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 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.

Direktiva ng-repeat u AngularJS

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.

AngularJS viลกe kontrolera

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

AngularJS viลกe kontrolera

POVEZANI ฤŒLANCI

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.

Svojstvo Tip Joลก malo brojeva
$index Broj Poloลพaj trenutne stavke, poฤevลกi od 0
$first Booleova Vrijedi samo za prvu stavku
$last Booleova Vrijedi samo za posljednju stavku
$middle Booleova Istinito za svaku stavku koja nije ni prva ni zadnja
$even Booleova True kada je $index paran
$odd Booleova True kada je $index neparan

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

Da, koriลกtenjem ng-repeat="(key, value) in myObject"Imajte na umu da AngularJS iterira kljuฤeve objekata sortiranim redoslijedom, a ne redoslijedom umetanja, pa je niz sigurniji kada je redoslijed vaลพan.

Lanฤani filteri u izrazu, kao u ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Izvorni niz ostaje netaknut; mijenjaju se samo prikazani redoslijed i podskup.

Da. AI alati mapiraju ng-repeat na *ngFor i track od do trackBy funkcije. Paลพljivo provjerite filtere jer je Angular namjerno izostavio ugraฤ‘eni filter i orderBy cijevi.

Alati umjetne inteligencije uoฤavaju pozive funkcija unutar izraza za ponavljanje, koji se ponovno izvode pri svakom saลพetku, a nedostaju track by klauzule koje prisiljavaju potpunu obnovu DOM-a. Oboje su uobiฤajeni uzroci spore liste.

Koristite obrazac za komentare, ng-repeat-start i ng-repeat-end, koji ponavlja niz srodnih elemenata. To je vaลพno u tablicama, gdje bi dodatni div prekinuo oznaฤavanje.

Saลพmite ovu objavu uz: