Ismételt információk megjelenítése
Előfordulhat, hogy a nézetben tételek listáját kell megjelenítenünk, ezért az a kérdés, hogy hogyan jeleníthetjük meg a vezérlőnkben meghatározott elemek listáját a nézet oldalunkon.
Az Angular egy "ng-repeat" nevű irányelvet nyújt, amely felhasználható a vezérlőnkben meghatározott ismétlődő értékek megjelenítésére.
Nézzünk meg egy példát arra, hogyan érhetjük el ezt.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Kód Magyarázat:
- A vezérlőben először meghatározzuk a listaelemek tömbjét, amelyeket meg akarunk definiálni a nézetben. Itt meghatároztunk egy "TopicNames" nevű tömböt, amely három elemet tartalmaz. Minden elem név-érték párból áll.
- A TopicsNames tömböt ezután hozzáadjuk a "topic" nevű tagváltozóhoz, és csatoljuk a hatókörünk objektumához.
- A
- (Rendezetlen lista) és a
- (Lista elem) HTML címkéket használjuk a tömbünkben található elemek listájának megjelenítésére. Ezután az ng-repeat direktívát használjuk a tömb minden egyes elemének áttekintéséhez. A "tpname" szó egy változó, amelyet arra használnak, hogy a tömb minden egyes elemére mutasson.
- Ebben megjelenítjük az egyes tömb elemek értékét.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot. Megjelenik a tömb összes eleme (alapvetően a témakörök topiknevei).
Kimenet:
Angularjs több vezérlő
Haladó vezérlőpélda lenne az a koncepció, ha több vezérlő van egy szögletes JS alkalmazásban.
Érdemes több vezérlőt definiálni a különböző üzleti logikai funkciók elkülönítésére. Korábban említettük, hogy különböző módszerek vannak egy vezérlőben, amelyben az egyik módszer különálló funkcióval rendelkezik a számok összeadására és kivonására. Nos, több vezérlővel rendelkezhet a logika fejlettebb elválasztása érdekében. Például lehet egy vezérlő, amely csak a számokkal műveleteket hajt végre, a másik pedig a karakterláncokkal.
Nézzünk meg egy példát arra, hogyan definiálhatunk több vezérlőt egy angular.JS alkalmazásban.
Event Registration Guru99 Global Event
{{lname}}
Kód Magyarázat:
- Itt meghatározunk 2 vezérlőt, az úgynevezett "firstController" és "secondController" nevet. Minden vezérlőhöz hozzáadunk néhány kódot is a feldolgozáshoz. Az első vezérlőnkben egy "pname" nevű változót csatolunk, amelynek az értéke "firstController", a secondControllerbe pedig egy "lname" nevű változót csatolunk, amelynek az értéke "secondController".
- A nézetben mindkét vezérlőhöz hozzáférünk, és a második vezérlő tagváltozóját használjuk.
A kód sikeres végrehajtása esetén a következő kimenet jelenik meg, amikor a böngészőben futtatja a kódot. A várakozásoknak megfelelően megjelenik a "secondController" teljes szövege.
Kimenet:
Összegzés
- Az ng-repeater direktíva több ismétlődő elem megjelenítésére használható.
- Megtekintettünk egy fejlett vezérlőt is, amely egy alkalmazásban több vezérlő meghatározását vizsgálta.