Afișarea informațiilor repetate
Uneori este posibil să ni se solicite să afișăm o listă de elemente în vizualizare, așa că întrebarea este cum putem afișa o listă de elemente definite în controlerul nostru pe pagina noastră de vizualizare.
Angular oferă o directivă numită „ng-repeat” care poate fi utilizată pentru a afișa valorile repetate definite în controlerul nostru.
Să vedem un exemplu al modului în care putem realiza acest lucru.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Explicatie cod:
- În controler, mai întâi definim matricea noastră de elemente de listă pe care dorim să le definim în vizualizare. Aici am definit o matrice numită „TopicNames” care conține trei elemente. Fiecare articol este format dintr-o pereche nume-valoare.
- Matricea TopicsNames este apoi adăugată la o variabilă membru numită „subiecte” și atașată la obiectul nostru de scop
- Folosim etichetele HTML
- (Listă neordonată) și
- (Element de listă) pentru a afișa lista de elemente din matricea noastră. Apoi folosim directiva ng-repeat pentru a parcurge fiecare articol din matricea noastră. Cuvântul "tpname" este o variabilă care este utilizată pentru a indica fiecare element din subiectele matricei.
- În aceasta, vom afișa valoarea fiecărui element de matrice.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser. Veți vedea toate elementele matricei (Practic numele subiectelor din subiecte) afișate.
Ieșire:
Controlere multiple Angularjs
Un exemplu avansat de controler ar fi conceptul de a avea mai multe controlere într-o aplicație JS unghiulară.
S-ar putea să doriți să definiți mai multe controlere pentru a separa diferite funcții de logică de afaceri. Mai devreme am menționat că există metode diferite într-un controler în care o metodă avea funcționalitate separată pentru adunarea și scăderea numerelor. Ei bine, puteți avea mai multe controlere pentru a avea o separare mai avansată a logicii. De exemplu, puteți avea un controler care face doar operații pe numere și celălalt care face operații pe șiruri.
Să vedem un exemplu de modul în care putem defini mai multe controlere într-o aplicație angular.JS.
Event Registration Guru99 Global Event
{{lname}}
Explicatie cod:
- Aici definim 2 controlere numite „firstController” și „secondController”. Pentru fiecare controler adăugăm și un cod pentru procesare. În primul nostru controler, atașăm o variabilă numită "pname" care are valoarea "firstController", iar în al doilea controlor atașăm o variabilă numită "lname" care are valoarea "secondController".
- În vizualizare, accesăm ambele controlere și folosim variabila membru din al doilea controler.
Dacă codul este executat cu succes, următoarea ieșire va fi afișată când rulați codul în browser. Veți vedea tot textul „secondController” așa cum era de așteptat.
Ieșire:
rezumat
- Directiva ng-repeater poate fi utilizată pentru a afișa mai multe elemente care se repetă.
- De asemenea, am analizat un controler avansat care a analizat definiția mai multor controlere dintr-o aplicație.