Zobrazení opakovaných informací
Někdy od nás může být požadováno zobrazení seznamu položek v pohledu, takže otázkou je, jak můžeme zobrazit seznam položek definovaných v našem kontroléru na naší stránce zobrazení.
Angular poskytuje direktivu nazvanou „ng-repeat“, kterou lze použít k zobrazení opakujících se hodnot definovaných v našem kontroléru.
Podívejme se na příklad, jak toho můžeme dosáhnout.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Vysvětlení kódu:
- V řadiči nejprve definujeme naše pole položek seznamu, které chceme definovat v pohledu. Zde jsme definovali pole s názvem „TopicNames“, které obsahuje tři položky. Každá položka se skládá z dvojice název-hodnota.
- Pole TopicsNames se poté přidá do členské proměnné s názvem „topic“ a připojí se k našemu objektu oboru.
- K zobrazení seznamu položek v našem poli používáme značky HTML
- (neuspořádaný seznam) a
- (položka seznamu). Pak použijeme direktivu ng-repeat pro procházení každou položkou v našem poli. Slovo „název_tp“ je proměnná, která se používá k ukázání na každou položku v tématu topic.TopicNames.
- V tomto zobrazíme hodnotu každé položky pole.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup. Zobrazí se všechny položky pole (v zásadě názvy témat v tématech).
Výstup:
Angularjs více řadičů
Příkladem pokročilého řadiče by byl koncept mít více řadičů v úhlové aplikaci JS.
Možná budete chtít definovat více řadičů k oddělení různých funkcí obchodní logiky. Dříve jsme se zmínili o tom, že máme v kontroleru různé metody, ve kterých jedna metoda měla samostatnou funkci pro sčítání a odčítání čísel. Můžete mít více řadičů, abyste měli pokročilejší oddělení logiky. Například můžete mít jeden řadič, který provádí pouze operace s čísly a druhý, který provádí operace s řetězci.
Podívejme se na příklad, jak můžeme definovat více řadičů v aplikaci angular.JS.
Event Registration Guru99 Global Event
{{lname}}
Vysvětlení kódu:
- Zde definujeme 2 řadiče zvané „firstController“ a „secondController“. Pro každý řadič také přidáváme nějaký kód pro zpracování. V našem firstController připojíme proměnnou nazvanou „pname“, která má hodnotu „firstController“, a v secondController připojíme proměnnou nazvanou „lname“, která má hodnotu „secondController“.
- V pohledu přistupujeme k oběma řadičům a používáme členskou proměnnou z druhého řadiče.
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup. Veškerý text „secondController“ se zobrazí podle očekávání.
Výstup:
souhrn
- Direktivu ng-repeater lze použít k zobrazení více opakujících se položek.
- Také jsme se podívali na pokročilý řadič, který se podíval na definici více řadičů v aplikaci.