Zobrazenie opakovaných informácií
Niekedy sa od nás môže vyžadovať, aby sme v zobrazení zobrazili zoznam položiek, takže otázkou je, ako môžeme na našej stránke zobrazenia zobraziť zoznam položiek definovaných v našom ovládači.
Angular poskytuje smernicu nazvanú „ng-repeat“, ktorú je možné použiť na zobrazenie opakujúcich sa hodnôt definovaných v našom ovládači.
Pozrime sa na príklad toho, ako to môžeme dosiahnuť.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Vysvetlenie kódu:
- V ovládači najskôr definujeme naše pole položiek zoznamu, ktoré chceme definovať v zobrazení. Tu sme definovali pole s názvom „TopicNames“, ktoré obsahuje tri položky. Každá položka sa skladá z dvojice názov-hodnota.
- Pole TopicsNames sa potom pridá do členskej premennej s názvom „topic“ a pripojí sa k nášmu objektu rozsahu.
- Na zobrazenie zoznamu položiek v našom poli používame značky HTML
- (Unordered List) a
- (List Item). Potom použijeme direktívu ng-repeat na prechádzanie každou položkou v našom poli. Slovo "tpname" je premenná, ktorá sa používa na ukázanie na každú položku v téme poľa.TopicNames.
- V tomto zobrazíme hodnotu každej položky poľa.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup. Uvidíte všetky položky poľa (v zásade názvy tém v témach).
Výkon:
Viaceré ovládače Angularjs
Pokročilým príkladom radiča by bol koncept mať viac radičov v uhlovej aplikácii JS.
Možno budete chcieť definovať viac radičov na oddelenie rôznych funkcií obchodnej logiky. Predtým sme sa zmienili o tom, že máme rôzne metódy v radiči, kde jedna metóda mala samostatnú funkčnosť na sčítanie a odčítanie čísel. Môžete mať viac radičov, aby ste mali pokročilejšie oddelenie logiky. Napríklad môžete mať jeden radič, ktorý robí iba operácie s číslami a druhý, ktorý robí iba operácie s reťazcami.
Pozrime sa na príklad toho, ako môžeme definovať viac radičov v aplikácii angular.JS.
Event Registration Guru99 Global Event
{{lname}}
Vysvetlenie kódu:
- Tu definujeme 2 radiče, ktoré sa nazývajú „firstController“ a „secondController“. Pre každý radič pridávame aj nejaký kód na spracovanie. V našom firstController pripojíme premennú nazvanú „pname“, ktorá má hodnotu „firstController“, a v secondController pripojíme premennú nazvanú „lname“, ktorá má hodnotu „secondController“.
- V tomto zobrazení pristupujeme k obidvom radičom a používame členskú premennú z druhého radiča.
Ak sa kód úspešne vykoná, pri spustení kódu v prehliadači sa zobrazí nasledujúci výstup. Uvidíte všetok text „secondController“ podľa očakávania.
Výkon:
Zhrnutie
- Direktívu ng-repeater možno použiť na zobrazenie viacerých opakujúcich sa položiek.
- Pozreli sme sa tiež na pokročilý radič, ktorý sa zameral na definíciu viacerých radičov v aplikácii.