Direktiva AngularJS ng-repeat s primerom

Kazalo:

Anonim

Prikaz ponavljajočih se informacij

Včasih bomo morda morali prikazati seznam elementov v pogledu, zato je vprašanje, kako lahko na našo stran za prikaz prikažemo seznam elementov, določenih v našem krmilniku.

Angular ponuja direktivo, imenovano "ng-repeat", ki se lahko uporablja za prikaz ponavljajočih se vrednosti, določenih v našem krmilniku.

Oglejmo si primer, kako lahko to dosežemo.

Event Registration

Guru99 Global Event

Topics

  • {{tpname.name}}

Razlaga kode:

  1. V krmilniku najprej definiramo nabor elementov seznama, ki jih želimo definirati v pogledu. Tukaj smo definirali polje z imenom "TopicNames", ki vsebuje tri elemente. Vsak element je sestavljen iz para ime-vrednost.
  2. Nato je niz TopicsNames dodan spremenljivki člana, imenovani "topics", in pritrjen na naš predmet obsega.
  3. Za prikaz seznama elementov v naši matriki uporabljamo oznaki HTML
      (Neurejeni seznam) in
    • (Element seznama). Nato uporabimo direktivo ng-repeat za pregledovanje vseh elementov v naši matriki. Beseda "tpname" je spremenljivka, ki se uporablja za usmerjanje na vsak element v temi polja. TopicNames.
    • V tem bomo prikazali vrednost vsakega elementa matrike.

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod. Videli boste vse prikazane elemente polja (v bistvu Imena tem v temah).

Izhod:

Angularjs več krmilnikov

Primer naprednega krmilnika bi bil koncept več krmilnikov v kotni JS aplikaciji.

Morda boste želeli določiti več krmilnikov za ločevanje različnih funkcij poslovne logike. Prej smo že omenili različne metode v krmilniku, pri katerih je imela ena metoda ločeno funkcionalnost za seštevanje in odštevanje števil. No, lahko imate več krmilnikov za bolj napredno ločevanje logike. Na primer, lahko imate enega krmilnika, ki izvaja samo operacije s številkami, drugega pa, ki izvaja operacije z nizi.

Oglejmo si primer, kako lahko v aplikaciji angular.JS definiramo več krmilnikov.

Event Registration

Guru99 Global Event

{{lname}}

Razlaga kode:

  1. Tu definiramo 2 krmilnika, imenovana "firstController" in "secondController". Za vsak krmilnik dodajamo tudi nekaj kode za obdelavo. V naš firstController priložimo spremenljivko, imenovano "pname", ki ima vrednost "firstController", v secondController pa spremenljivko z imenom "lname", ki ima vrednost "secondController".
  2. V pogledu dostopamo do obeh krmilnikov in uporabljamo spremenljivko člana iz drugega krmilnika.

Če se koda uspešno izvede, se pri zagonu kode v brskalniku prikaže naslednji izhod. Videli boste celotno besedilo "secondController", kot je bilo pričakovano.

Izhod:

Povzetek

  • Direktivo ng-repeater lahko uporabite za prikaz več ponavljajočih se elementov.
  • Ogledali smo si tudi napredni krmilnik, ki je preučil definicijo več krmilnikov v aplikaciji.