AngularJS ng-repeat -direktiivi esimerkin kanssa

by: James Hartman James Hartman
Hours Päivitetty

⚡ Älykäs yhteenveto

AngularJS:n ng-repeat-direktiivi renderöi yhden kopion elementistä jokaista ohjainalueella määritellyn kokoelman alkiota kohden. Se muuntaa taulukon listaksi, taulukoksi tai miksi tahansa toistuvaksi merkinnäksi ilman manuaalisen silmukan kirjoittamista.

  • 🔁 Ydinkäyttäytyminen: ng-repeat kloonaa isäntäelementtinsä kerran alkiota kohden, joten direktiivi kuuluu toistettavaan elementtiin, ei sen säiliöön.
  • 🏷️ Silmukkamuuttuja: Sanan "in" edessä olevasta nimestä tulee kloonin sisällä olevan nykyisen kohteen paikallinen alias.
  • 🧬 Lapsen laajuus: Jokainen iteraatio saa oman lapsi-ilmiön, minkä vuoksi silmukan sisällä olevan primitiivin osoittaminen ei yllä vanhempaan.
  • 🔑 Identiteetti Tracking: A track-lauseke kertoo AngularJS:lle, miten alkiot tunnistetaan, ja se vaaditaan, kun kokoelma sisältää toistuvia arvoja.
  • 🔢 Sisäänrakennetut paikalliset: Ominaisuudet, kuten $index, $first ja $last, ovat käytettävissä kunkin iteraation sisällä numerointia ja tyyliä varten.
  • ⚠️ Tuen tila: AngularJS:n elinkaari päättyi 31. joulukuuta 2021, eikä sille ole enää saatavilla tietoturvapäivityksiä.
Lue lisää

AngularJS ng-toistodirektiivi

ng-repeat-direktiivi AngularJS:ssä

ng-toista Direktiivi AngularJS:ssä käytetään näyttämään ohjaimessa määriteltyjä toistuvia arvoja. Joskus meidän on näytettävä luettelo kohteista näkymässä, ja ng-repeat renderöi ohjaimessa määritellyn luettelon näkymäsivulle.

⚠️ Tukitiedote: AngularJS saavutettu käyttöiän päättyessä 31. joulukuuta 2021 eikä saa enää korjauksia tai tietoturvakorjauksia. Alla oleva direktiivi pysyy paikkansa olemassa olevien AngularJS 1.x -sovellusten ylläpidossa; nykyaikaisissa Kulma- vastaava on *ngFor rakenteellinen direktiivi.

Esimerkki AngularJS ng-repeat -direktiivistä

Katsotaanpa esimerkkiä ng-repeat-direktiivistä AngularJS:ssä:

ng-repeat-direktiivi AngularJS:ssä

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

  1. In ohjain, määrittelemme ensin näkymässä näytettävien listakohteiden taulukon. Tässä taulukko nimeltä TopicNames sisältää kolme alkiota, joista jokainen on nimi-arvo-pari.
  2. Taulukko on osoitettu suoraan $scope.TopicNames, mikä tekee sen saataville tähän ohjaimeen sidotulle näkymälle.
  3. HTML-tagit <ul> (järjestämätön lista) ja <li> (luettelokohta) näyttää kohteet. ng-repeat-direktiivi käy läpi jokaisen taulukon merkinnän ja tpname on paikallinen muuttuja, joka sisältää nykyisen alkion, joten {{tpname.name}} tulostaa nimiominaisuuden.

⚠️ Korjaus: alkuperäisessä selityksessä todettiin, että taulukko "lisättiin jäsenmuuttujaan nimeltä topics". Koodiin ei sisälly tällaista muuttujaa — taulukkoon arvo annetaan suoraan $scope.TopicNames, joka on nimi, johon näkymä viittaa. Toisen nimen lisääminen tähän on yleinen syy tyhjään listaan.

Jos koodi suoritetaan onnistuneesti, selaimessa näkyy seuraava tuloste.

ng-repeat-direktiivi AngularJS:ssä

AngularJS useita ohjaimia

Aiemmin näimme yhden ohjaimen, jossa yksi metodi käsitteli sekä yhteenlaskun että osalaskuntracnumeroiden erottaminen. Voit sen sijaan käyttää useita ohjaimia logiikan erottamiseksi selkeämmin. Esimerkiksi yksi ohjain voi käsitellä numeroita, kun taas toinen käsittelee merkkijonoja.

Katsotaanpa esimerkkiä useiden ohjainten määrittelystä AngularJS-sovelluksessa.

AngularJS useita ohjaimia

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

  1. Kaksi ohjainta on määritelty, firstcontroller ja secondcontrollerJokainen liittää muuttujan omaan laajuus: pname ensimmäisessä, lname toisessa.
  2. Näkymässä toinen ohjain on ensimmäisen sisällä ja lauseke lukee lname sisemmästä laajuusalueesta. Koska sisäkkäinen ohjain perii vanhemmalta, {{pname}} ratkeaisi myös tässä — perintö virtaa alaspäin, ei koskaan ylöspäin.

Jos koodi suoritetaan onnistuneesti, teksti toinen ohjain näytetään.

AngularJS useita ohjaimia

AIHEESEEN LIITTYVÄT ARTIKKELIT

Kuinka käyttää track by ng-toistolla

Yleisin ng-toiston epäonnistuminen on virhe Duplicates in a repeater are not allowedSe ilmestyy heti, kun kokoelma sisältää saman arvon kahdesti, ja se pysäyttää listan renderöinnin kokonaan.

Syynä on identiteetti trackuningas. AngularJS tarvitsee vakaan avaimen jokaiselle alkiolle, jotta se voi käyttää DOM-solmuja uudelleen sen sijaan, että se rakentaisi ne uudelleen jokaisella tiivisteellä. Oletusarvoisesti se käyttää itse alkion arvoa, joten kaksi identtistä arvoa törmäävät.

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

Valinta näiden kahden muodon välillä on tärkeämpi kuin miltä se ensi silmäyksellä näyttää. Tracking by $index ratkaisee aina virheen, koska sijainti on määritelmän mukaan yksilöllinen, mutta se sitoo jokaisen DOM-solmun paikkaan tietueen sijaan. Kokoelman uudelleenjärjestely tai suodattaminen käyttää sitten uudelleen vääriä solmuja, jotka näkyvät syöttökenttinä, jotka säilyvätping edellisen rivin teksti.

Tracking aidolla tunnisteella, kuten topic.id välttää sen kokonaan. AngularJS voi seurata kutakin tietuetta sen liikkuessa, joten se järjestää olemassa olevat solmut uudelleen sen sijaan, että se tuhoaisi ja rakentaisi ne uudelleen. Pitkillä listoilla tämä on myös huomattavasti nopeampaa, koska uudelleenrenderöinti koskee vain rivejä, jotka todella muuttuivat. Käytä $index vain yksinkertaisten arvojen taulukoille, jotka eivät koskaan järjesty uudelleen.

ng-repeat-funktion sisällä käytettävissä olevat erikoisominaisuudet

Jokainen ng-repeat-funktion iteraatio paljastaa useita vain luku -tilassa olevia ominaisuuksia omassa aliosiossa. Ne kuvaavat nykyisen alkion sijaintia kokoelmassa, mikä kattaa numeroinnin, vuorottelevat tyylit ja erottimet lisäämättä ohjaimeen mitään ylimääräistä tilaa.

Omaisuus Tyyppi Arvo
$index numero Nykyisen kohteen sijainti alkaen kohdasta 0
$first boolean Totta vain ensimmäiselle esineelle
$last boolean Totta vain viimeiselle kohdalle
$middle boolean Totta jokaiselle esineelle, joka ei ole ensimmäinen eikä viimeinen
$even boolean Totta, kun $index on parillinen
$odd boolean Tosi, kun $index on pariton

Tyypillinen käyttö yhdistää ne ng-luokan kanssa seepra-striisien tekemiseen.ping, kuten ng-class="{'row-alt': $odd}", tai ng-if-funktiolla erotinmerkin hahmontamiseksi jokaisella rivillä paitsi viimeisellä, kirjoitettuna ng-if="!$last"Ihmisen luettavan rivinumeron näyttäminen on yksinkertaisesti {{$index + 1}}, koska indeksi on nollapohjainen. Kaikki kuusi ominaisuutta lasketaan automaattisesti uudelleen aina, kun kokoelma muuttuu, joten mitään ei tarvitse laskea uudelleen käsin.

Yleisiä ng-repeat-virheitä ja niiden korjaaminen

Useimmat ng-toisto-ongelmat johtuvat kaksoisarvoista, laajuusperiytymisestä tai väärällä elementillä olevasta direktiivistä. Jokainen alla oleva oire nimeää syynsä.

  • Toistimessa olevat kaksoiskappaleet eivät ole sallittuja: kokoelma sisältää toistuvan arvon. Lisää track by $index, tai parempi, track by ainutlaatuinen ominaisuus.
  • Lista ei anna mitään selvää: näkymän nimi ei vastaa laajuusalueen ominaisuutta. Tulosta kokoelma käyttämällä {{TopicNames}} vahvistamaan sen saapumisen.
  • Jokainen elementti toistuu, mukaan lukien kääre: ng-repeat sijoitettiin säiliöön eikä esineeseen. Siirrä se <li> or <tr>.
  • Syötteen muokkaaminen muuttaa väärää riviä: lista on tracked by $index samalla kun esineet järjestyvät uudelleen. Track vakaan tunnisteen avulla.
  • Silmukan sisällä olevat muutokset eivät säily: Jokaisella iteraatiolla on oma lapsilaajuus, joten primitiiviin kirjoittaminen luo paikallisen kopion. Kirjoita objektin ominaisuuteen, kuten item.done.

UKK

Kyllä, käyttää ng-repeat="(key, value) in myObject"Huomaa, että AngularJS iteroi objektiavaimet lajitellussa järjestyksessä, ei lisäysjärjestyksessä, joten taulukko on turvallisempi, kun järjestyksellä on merkitystä.

Ketjusuodattimet lausekkeessa, kuten kohdassa ng-repeat="t in TopicNames | filter:search | orderBy:'name'"Alkuperäistä taulukkoa ei muuteta; vain renderöity järjestys ja osajoukko muuttuvat.

Kyllä. AI työkalut yhdistävät ng-repeat-funktion *ngFor ja track mennessä kohteeseen trackBy-funktiot. Tarkista suodattimet huolellisesti, koska Angular poisti tarkoituksella sisäänrakennetun suodattimen ja orderBy-pipe-funktiot.

Tekoälytyökalut havaitsevat funktiokutsuja toistolausekkeen sisällä, jotka suoritetaan uudelleen jokaisella tiivisteellä, ja puuttuvia track lausekkeilla, jotka pakottavat täydelliset DOM-uudelleenrakennukset. Molemmat ovat tavanomaisia ​​syitä hitaalle listalle.

Käytä kommenttilomaketta, ng-repeat-start ja ng-repeat-end, joka toistaa useita sisaruselementtejä. Tällä on merkitystä taulukoissa, joissa ylimääräinen div-elementti rikkoisi merkinnän.

Tiivistä tämä viesti seuraavasti: