AngularJS ng-repeat direktíva példával

By: James Hartman James Hartman
Hours korszerűsített

⚡ Okos összefoglaló

Az AngularJS ng-repeat direktívája egy elem egy másolatát rendereli a vezérlő hatókörében definiált gyűjtemény minden eleméhez. Egy tömböt listává, táblázattá vagy bármilyen ismétlődő jelölőné alakít manuális ciklus írása nélkül.

  • 🔁 Alapvető viselkedés: Az ng-repeat elemenként egyszer klónozza a host elemét, így az utasítás az ismétlődő elemhez tartozik, nem a konténeréhez.
  • 🏷️ Ciklusváltozó: A „in” szó előtti név a klónon belüli aktuális elem helyi aliasává válik.
  • 🧬 Gyermek hatóköre: Minden iteráció kap egy saját gyermek hatókört, ezért egy primitív cikluson belüli hozzárendelése nem éri el a szülőt.
  • 🔑 Identitás Tracking: A tracA k kifejezés megmondja az AngularJS-nek, hogyan azonosítsa az elemeket, és erre akkor van szükség, ha egy gyűjtemény ismétlődő értékeket tartalmaz.
  • 🔢 Beépített helyi eszközök: Az olyan tulajdonságok, mint a $index, $first és $last, minden iteráción belül elérhetők számozáshoz és formázáshoz.
  • ⚠️ Támogatási állapot: Az AngularJS 2021. december 31-én elérte az élettartama végét, és további biztonsági javításokat nem kap.
További információk

AngularJS ng-ismétlési direktíva

ng-repeat direktíva az AngularJS-ben

Az ng-ismétlés Irányelv Az AngularJS-ben az függvényt a vezérlőben definiált ismétlődő értékek megjelenítésére használjuk. Néha szükségünk van egy elemlistára a nézetben, ilyenkor az ng-repeat egy, a vezérlőben definiált listát jelenít meg egy nézet oldalon.

⚠️ Támogatási közlemény: AngularJS elérve élettartam vége 2021. december 31-én és nem kap további javításokat vagy biztonsági javításokat. Az alábbi direktíva továbbra is pontos a meglévő AngularJS 1.x alkalmazások karbantartása érdekében; a modern szögletes az egyenértékű a *ngFor strukturális irányelv.

AngularJS ng-repeat direktíva Példa

Nézzünk egy példát az ng-repeat direktívára az AngularJS-ben:

ng-repeat direktíva az AngularJS-ben

<!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 Magyarázat:

  1. A ellenőr, először definiáljuk a nézetben megjelenítendő listaelemek tömbjét. Itt egy tömb, az úgynevezett TopicNames három elemet tartalmaz, mindegyik egy név-érték párt.
  2. A tömb közvetlenül hozzá van rendelve a következőhöz: $scope.TopicNames, ami elérhetővé teszi azt a vezérlőhöz kötött nézet számára.
  3. A HTML-címkék <ul> (rendezetlen lista) és <li> (listaelem) megjeleníti az elemeket. Az ng-repeat direktíva végigmegy a tömb minden egyes elemén, és tpname az aktuális elemet tároló lokális változó, tehát {{tpname.name}} kinyomtatja a name tulajdonságát.

⚠️ Javítás: az eredeti magyarázat szerint a tömböt „hozzáadták egy tagváltozóhoz, amelynek neve topics„. A kódban nincs ilyen változó — a tömböt közvetlenül a következőhöz rendeljük hozzá: $scope.TopicNames, ami a nézet által hivatkozott név. Egy második név megadása itt az üres lista gyakori oka.

Ha a kód sikeresen végrehajtódik, a következő kimenet jelenik meg a böngészőben.

ng-repeat direktíva az AngularJS-ben

AngularJS több vezérlő

Korábban egyetlen vezérlőt láttunk, amelyben egy metódus kezelte az összeadást és a részhalmazt is.tracszámok szétválasztása. Ehelyett több vezérlőt is használhat a logika tisztább szétválasztásához. Például az egyik vezérlő számokkal, míg a másik karakterláncokkal működhet.

Nézzünk egy példát több vezérlő definiálására egy AngularJS alkalmazásban.

AngularJS több vezérlő

<!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 Magyarázat:

  1. Két vezérlő van definiálva, firstcontroller és a secondcontrollerMindegyik egy változót csatol a sajátjához. hatálya: pname az elsőben, lname a másodikban.
  2. A nézetben a második vezérlő az elsőbe van beágyazva, és a kifejezés a következőképpen néz ki: lname a belső hatókörből. Mivel egy beágyazott vezérlő örököl a szülőjétől, {{pname}} itt is feloldódna – az örökség lefelé áramlik, soha nem felfelé.

Ha a kód sikeresen végrehajtódik, a szöveg második vezérlő üzenet jelenik meg.

AngularJS több vezérlő

KAPCSOLÓDÓ CIKKEK

Hogyan használjuk track által ng-ismétléssel

Az ng-ismétlés leggyakoribb hibája a hiba Duplicates in a repeater are not allowedAbban a pillanatban jelenik meg, amikor egy gyűjtemény kétszer tartalmazza ugyanazt az értéket, és teljesen leállítja a lista megjelenítését.

Az ok az identitás trackirály. Az AngularJS-nek minden elemhez stabil kulcsra van szüksége, hogy újra felhasználhassa a DOM csomópontokat ahelyett, hogy minden kivonatoláskor újraépítené azokat. Alapértelmezés szerint magát az elem értékét használja, így két azonos érték ütközik.

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

A két forma közötti választás fontosabb, mint amilyennek elsőre látszik. Tracking by $index mindig megoldja a hibát, mivel egy pozíció definíció szerint egyedi, de minden DOM csomópontot egy slothoz, nem pedig egy rekordhoz köt. A gyűjtemény átrendezése vagy szűrése ezután újra felhasználja a rossz csomópontokat, amelyek bemeneti mezőként jelennek meg.ping az előző sor szövege.

Tracking egy valódi azonosító alapján, például topic.id Ezt teljesen elkerüli. Az AngularJS képes követni az egyes rekordok mozgását, így a meglévő csomópontokat átrendezi ahelyett, hogy megsemmisítené és újraépítené azokat. Hosszú listák esetén ez jelentősen gyorsabb is, mivel az újrarenderelés csak azokat a sorokat érinti, amelyek ténylegesen megváltoztak. $index csak sima értékekből álló tömbök esetén, amelyek soha nem rendeződnek át.

Az ng-repeat függvényen belül elérhető speciális tulajdonságok

Az ng-repeat minden egyes iterációja számos írásvédett tulajdonságot tesz elérhetővé a saját gyermek hatókörében. Ezek leírják, hogy az aktuális elem hol helyezkedik el a gyűjteményen belül, ami magában foglalja a számozást, a váltakozó stílusokat és az elválasztókat anélkül, hogy bármilyen extra állapotot hozzáadna a vezérlőhöz.

Ingatlanok típus Érték:
$index Szám Az aktuális elem pozíciója, 0-tól kezdve
$first logikai Csak az első elemre igaz
$last logikai Csak az utolsó elemre igaz
$middle logikai Minden olyan elemre igaz, ami se nem első, se nem utolsó.
$even logikai Igaz, ha a $index páros szám.
$odd logikai Igaz, ha a $index páratlan.

Egy tipikus felhasználási mód az ng-osztály zebra stri eseténping, mint a ng-class="{'row-alt': $odd}", vagy az ng-if függvénnyel, hogy minden sorban elválasztójel jelenjen meg, kivéve az utolsót, írva ng-if="!$last"Az ember által olvasható sorszám megjelenítése egyszerűen {{$index + 1}}, mivel az index nulla alapú. Mind a hat tulajdonság automatikusan újraszámításra kerül, amikor a gyűjtemény megváltozik, így semmit sem kell kézzel újraszámítani.

Gyakori ng-repeat hibák és javításuk

A legtöbb ng-ismétléses probléma duplikált értékekből, hatókör-öröklésből vagy a rossz elemen lévő direktívából ered. Az alábbi tünetek mindegyike megnevezi az okát.

  • Az ismétlőben lévő ismétlődések nem engedélyezettek: a gyűjtemény ismétlődő értéket tartalmaz. Adj hozzá track by $index, vagy még jobb, track by egyedi tulajdonság.
  • A lista semmit sem mutat: A nézetben szereplő név nem egyezik meg a hatókör tulajdonságával. Nyomtassa ki a gyűjteményt a következővel: {{TopicNames}} hogy megerősítse megérkezését.
  • Minden elem ismétlődik, beleértve a wrappert is: Az ng-repeat a tárolóra lett helyezve, nem pedig az elemre. Helyezze át a következőre: <li> or <tr>.
  • Egy bemenet szerkesztése a rossz sort módosítja: a lista tracáltal $index miközben az elemek átrendeződnek. Track helyett egy stabil azonosítót használ.
  • A cikluson belüli változások nem maradnak meg: minden iterációnak saját gyermek hatóköre van, így egy primitívbe írás lokális másolatot hoz létre. Írás egy objektumtulajdonságba, például item.done.

GYIK

Igen, használ ng-repeat="(key, value) in myObject"Vegye figyelembe, hogy az AngularJS rendezett sorrendben iterálja az objektumkulcsokat, nem beszúrási sorrendben, így egy tömb biztonságosabb, ha a sorrend számít.

Láncszűrők a kifejezésben, mint például ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Az eredeti tömb érintetlen marad; csak a renderelt sorrend és a részhalmaz változik.

Igen. AI eszközök leképezik az ng-repeat-et erre: *ngFor és a track által trackBy függvények. Gondosan ellenőrizd a szűrőket, mert az Angular szándékosan elhagyta a beépített szűrőt és az orderBy pipe-okat.

A mesterséges intelligencia eszközei a függvényhívásokat az ismétlési kifejezésen belül észlelik, amelyek minden kivonatolásnál újra lefutnak, és hiányoznak. track olyan záradékokkal, amelyek teljes DOM-újraépítést kényszerítenek ki. Mindkettő a lassú lista szokásos oka.

Használd a hozzászólás űrlapot, ng-repeat-start és a ng-repeat-end, amely testvérelemek egy tartományát ismétli. Ez táblázatokban fontos, ahol egy extra div megszakítaná a jelölést.

Foglald össze ezt a bejegyzést a következőképpen: