Smjernica AngularJS ng-repeat s primjerom

Sadržaj:

Anonim

Prikazivanje ponovljenih informacija

Ponekad se od nas može zatražiti da prikažemo popis stavki u prikazu, pa je pitanje kako možemo prikazati popis stavki definiranih u našem kontroleru na našoj stranici prikaza.

Angular pruža direktivu nazvanu "ng-repeat" koja se može koristiti za prikaz ponavljajućih vrijednosti definiranih u našem kontroleru.

Pogledajmo primjer kako to možemo postići.

Event Registration


Guru99 Global Event




Topics


    

  • {{tpname.name}}
    •

Objašnjenje koda:

  1. U upravljaču prvo definiramo niz stavki popisa koje želimo definirati u prikazu. Ovdje smo definirali niz nazvan "TopicNames" koji sadrži tri stavke. Svaka se stavka sastoji od para ime i vrijednosti.
  2. Niz TopicsNames zatim se dodaje varijabli člana koja se naziva "topics" i pričvršćuje se na naš objekt opsega.
  3. Koristimo HTML oznake
      (Neuređeni popis) i
    • (Stavka popisa) za prikaz popisa stavki u našem nizu. Zatim koristimo ng-repeat direktivu za prolazak kroz svaku stavku u našem nizu. Riječ "tpname" je varijabla koja se koristi za usmjeravanje na svaku stavku u temama niza.TopicNames.
    • U ovome ćemo prikazati vrijednost svake stavke niza.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku. Vidjet ćete sve prikazane stavke niza (u osnovi teme).

Izlaz:

Angularjs višestruki kontroleri

Primjer naprednog kontrolera bio bi koncept imati više kontrolera u kutnoj JS aplikaciji.

Možda biste trebali definirati više kontrolera za odvajanje različitih funkcija poslovne logike. Ranije smo spomenuli postojanje različitih metoda u kontroleru u kojima je jedna metoda imala zasebnu funkcionalnost za zbrajanje i oduzimanje brojeva. Pa, možete imati više kontrolera da biste imali naprednije odvajanje logike. Na primjer, možete imati jedan kontroler koji vrši samo operacije s brojevima, a drugi koji vrši operacije sa žicama.

Pogledajmo primjer kako možemo definirati više kontrolera u aplikaciji angular.JS.

Event Registration


Guru99 Global Event


{{lname}}

Objašnjenje koda:

  1. Ovdje definiramo 2 kontrolera koja se nazivaju "firstController" i "secondController". Za svaki kontroler dodajemo i neki kod za obradu. U naš firstController pridružujemo varijablu koja se naziva "pname" koja ima vrijednost "firstController", a u secondController dodajemo varijablu pod nazivom "lname" koja ima vrijednost "secondController".
  2. U pogledu, pristupamo oba kontrolera i koristimo varijablu člana iz drugog kontrolera.

Ako se kôd uspješno izvrši, sljedeći će se izlaz prikazati kada pokrenete svoj kôd u pregledniku. Vidjet ćete sav tekst "secondController" kako se očekivalo.

Izlaz:

Sažetak

  • Direktiva ng-repeater može se koristiti za prikaz više ponavljajućih stavki.
  • Također smo pogledali napredni kontroler koji je gledao definiciju više kontrolera u aplikaciji.