Kuidas korrata ilma ümbriselementi lisamata?

Kasutage kommentaarivormi ng-repeat-start ja ng-repeat-end, mis kordavad suguluselementide vahemikku. See on oluline tabelites, kus lisadiv rikuks märgistuse.

AngularJS ng-repeat direktiiv koos näitega

⚡ Nutikas kokkuvõte

AngularJS-i ng-repeat direktiiv renderdab iga kontrolleri ulatuses määratletud kollektsiooni elemendi kohta ühe koopia. See muudab massiivi loendiks, tabeliks või mis tahes korduvaks märgistuseks ilma käsitsi tsüklit kirjutamata.

🔁 Põhikäitumine: ng-repeat kloonib oma host-elemendi üks kord elemendi kohta, seega kuulub direktiiv korduvale elemendile, mitte selle konteinerile.
???? ️ Silmuse muutuja: Sõna „in” ees olev nimi saab kloonis oleva praeguse elemendi kohalikuks aliaseks.
🧬 Lapse ulatus: Iga iteratsioon saab oma lapse ulatuse, mistõttu tsükli sees primitiivi määramine ülemobjektini ei jõua.
🔑 Identity Tracking: A tracAvaldise k abil annab AngularJS-ile teada, kuidas elemente tuvastada, ja see on vajalik, kui kogum sisaldab korduvaid väärtusi.
🔢 Sisseehitatud kohalikud seadmed: Igas iteratsioonis on nummerdamiseks ja stiilimiseks saadaval sellised omadused nagu $index, $first ja $last.
⚠️ Toe staatus: AngularJS-i eluiga lõppes 31. detsembril 2021 ja sellele ei tehta enam turvaparandusi.

Loe rohkem

ng-repeat direktiiv AngularJS-is

. ng-korda Direktiivi AngularJS-is kasutatakse kontrolleris määratletud korduvate väärtuste kuvamiseks. Mõnikord on vaja vaates kuvada üksuste loendit ja ng-repeat renderdab kontrolleris määratletud loendi vaate lehele.

⚠️ Tugiteade: AngularJS jõudis eluea lõpp 31. detsembril 2021 ja ei saa edasisi parandusi ega turvaparandusi. Allolev direktiiv jääb olemasolevate AngularJS 1.x rakenduste säilitamiseks täpseks; tänapäevastes nurgeline samaväärne on *ngFor struktuuriline direktiiv.

AngularJS ng-repeat direktiivi näide

Vaatame näidet ng-repeat direktiivist AngularJS-is:

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

aasta kontroller, defineerime kõigepealt vaates kuvatavate loendiüksuste massiivi. Siin massiiv nimega TopicNames sisaldab kolme elementi, millest igaüks on nime-väärtuse paar.
Massiiv on määratud otse $scope.TopicNames, mis teeb selle kättesaadavaks selle kontrolleriga seotud vaatele.
HTML-sildid <ul> (järjestamata loend) ja <li> (loendiüksus) kuvab üksused. ng-repeat direktiiv itereerib iga massiivi kirjet ja tpname on lokaalne muutuja, mis hoiab praegust elementi, seega {{tpname.name}} prindib oma nime atribuudi.

⚠️ Parandus: algses selgituses öeldi, et massiiv „lisati liikmemuutujale nimega topics„. Koodis sellist muutujat ei eksisteeri — massiiv omistatakse otse $scope.TopicNames, mis on nimi, millele vaade viitab. Teise nime lisamine on tühja loendi sagedane põhjus.

Kui kood edukalt käivitatakse, kuvatakse brauseris järgmine väljund.

AngularJS mitu kontrollerit

Varem nägime ühte kontrollerit, kus üks meetod käsitles nii liitmist kui ka alamjaotust.tracnumbrite eraldamine. Loogika selgemaks eraldamiseks võite kasutada mitut kontrollerit. Näiteks saab üks kontroller opereerida numbritega, samal ajal kui teine opereerib stringidega.

Vaatame näidet mitme kontrolleri defineerimisest AngularJS rakenduses.

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

Kaks kontrollerit on defineeritud, firstcontroller ja secondcontrollerIgaüks seob muutuja oma ulatus: pname esimeses lname teises.
Vaates on teine kontroller esimese sisse pesastatud ja avaldis loeb lname sisemisest ulatusest. Kuna pesastatud kontroller pärib oma ülemkontrollerilt, {{pname}} lahendaks ka siin — pärand voolab allapoole, mitte kunagi ülespoole.

Kui kood täidetakse edukalt, siis tekst teine kontroller kuvatakse.

Kuidas kasutada track poolt ng-kordusega

Kõige levinum ng-repeat'i tõrge on viga Duplicates in a repeater are not allowedSee ilmub hetkel, kui kogum sisaldab sama väärtust kaks korda, ja see peatab loendi renderdamise täielikult.

Põhjus on identiteet trackuningas. AngularJS vajab iga elemendi jaoks stabiilset võtit, et see saaks DOM-sõlmi uuesti kasutada, selle asemel, et neid iga kokkuvõtte puhul uuesti luua. Vaikimisi kasutab see elemendi väärtust ennast, seega kaks identset väärtust põrkuvad.

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

Kahe vormi vahel valimine on olulisem, kui esmapilgul paistab. Tracking by $index lahendab vea alati, kuna positsioon on definitsiooni järgi unikaalne, kuid see seob iga DOM-sõlme pigem pesaga kui kirjega. Kollektsiooni ümberjärjestamine või filtreerimine taaskasutab seejärel valesid sõlmi, mis kuvatakse sisendväljadena.ping eelmise rea tekst.

Tracking ehtsa identifikaatori abil, näiteks topic.id väldib seda täielikult. AngularJS saab jälgida iga kirje liikumist, seega järjestab see olemasolevaid sõlmi ümber, selle asemel et neid hävitada ja uuesti üles ehitada. Pikkade loendite puhul on see ka märkimisväärselt kiirem, kuna uuesti renderdamine puudutab ainult neid ridu, mis tegelikult muutusid. Kasutage $index ainult lihtväärtuste massiivide puhul, mille järjekorda ei muudeta.

ng-repeat'i sees saadaolevad eriomadused

Iga ng-repeat iteratsioon avaldab oma alamulatuses mitu kirjutuskaitstud omadust. Need kirjeldavad praeguse elemendi asukohta kollektsioonis, mis hõlmab nummerdamist, vahelduvaid stiile ja eraldajaid ilma kontrollerile täiendavat olekut lisamata.

vara	KASUTUSALA	Väärtus
`$index`	Number	Praeguse elemendi asukoht alates 0-st
`$first`	Boolean	Ainult esimese üksuse kohta kehtib
`$last`	Boolean	Ainult viimase üksuse kohta kehtib
`$middle`	Boolean	Tõsi iga eseme kohta, mis pole ei esimene ega viimane
`$even`	Boolean	Tõsi, kui $indeks on paarisarv
`$odd`	Boolean	Tõene, kui $indeks on paaritu

Tüüpiline kasutusala ühendab need ng-klassiga sebra striitide jaoksping, nagu ng-class="{'row-alt': $odd}"või ng-if abil, et kuvada eraldaja igal real peale viimase, kirjutatud ng-if="!$last"Inimloetava rea numbri kuvamine on lihtsalt {{$index + 1}}, kuna indeks põhineb nullil. Kõik kuus omadust arvutatakse automaatselt ümber iga kord, kui kollektsioon muutub, seega pole vaja midagi käsitsi ümber arvutada.

Levinumad ng-repeat vead ja kuidas neid parandada

Enamik ng-repeat'i probleeme tulenevad duplikaatväärtustest, ulatuse pärimisest või valel elemendil asuvast direktiivist. Iga allpool toodud sümptom nimetab oma põhjuse.

Kordusfailide duplikaadid ei ole lubatud: kollektsioon sisaldab korduvat väärtust. Lisa track by $indexvõi veel parem, track by ainulaadne omadus.
See nimekiri ei anna midagi: Vaates olev nimi ei vasta ulatuse atribuudile. Prindi kogumik välja {{TopicNames}} et kinnitada selle saabumist.
Iga element kordub, kaasa arvatud ümbris: ng-repeat paigutati konteinerile, mitte esemele. Liiguta see kohta <li> or <tr>.
Sisestuse muutmine muudab valet rida: nimekiri on tracked by $index samal ajal kui esemed ümber järjestuvad. Track stabiilse identifikaatori abil.
Tsükli sees olevad muudatused ei jää püsima: Igal iteratsioonil on oma alamulatus, seega primitiivile kirjutamine loob lokaalse koopia. Kirjuta objekti atribuudile, näiteks item.done.

KKK

Jah, kasutades ng-repeat="(key, value) in myObject"Pane tähele, et AngularJS itereerib objektivõtmeid sorteeritud järjekorras, mitte sisestamise järjekorras, seega on massiiv turvalisem, kui järjestus on oluline.

Avaldises olevad ahelfiltrid, nagu näiteks ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Algset massiivi ei muudeta; muutuvad ainult renderdatud järjekord ja alamhulk.

Jah. AI tööriistad kaardistavad ng-repeat'i *ngFor ja track poolt kuni trackBy funktsioonid. Kontrollige filtreid hoolikalt, sest Angular jättis tahtlikult sisseehitatud filtri ja orderBy torud välja.

Tehisintellekti tööriistad leiavad kordusavaldise sees funktsioonikõnesid, mis käivituvad igal kokkuvõttel uuesti, ja puuduvad track klauslite abil, mis sunnivad DOM-i täielikult ümber ehitama. Mõlemad on aeglase nimekirja tavalised põhjused.

Kasutage kommentaarivormi, ng-repeat-start ja ng-repeat-end, mis kordab mitmeid sugulussidemetega elemente. See on oluline tabelites, kus lisadiv rikuks märgistuse.