AngularJS - Manipulace s opakujícími se prvky

Klíčovou součástí webových aplikací je výpis výpisuTo bude vždy důležité, kdykoli pracujeme s databázemi, protože musíme ukázat uložené položky, stejně jako například pokud provozujeme internetový obchod, musíme ukázat seznam produktů.
Co musíme pochopit, že přestože jsou záznamy různé, prvky jako takové se opakují, protože se pravděpodobně jedná o řádky tabulky nebo seřazeného seznamu, bez ohledu na rozdíl v obsahu nepředstavuje rozdíl ve struktuře.
AngularJS nekomplikuje náš život, jednoduše pokud chceme použít nebo si vytvořit seznam, který musíme použít ng-opakovat který vytvoří prvek pro každý prvek obsažený v seznamu, čímž můžeme předat seznam produktů a snadno vygenerovat tabulku.
Řekněme, že vytváříme seznam studentů pro školu, klíčem je vygenerovat seznam, normálně bychom ho získali od některých webová služba který konzultuje databázi, ale pro zjednodušení si vytvoříme seznam sami, pak tento seznam nazýváme v rámci $ rozsah abyste jej mohli používat, s ním v rámci HTML můžeme začlenit instrukci ng-opakovat že jsme se zmínili, podívejme se na následující kód:

 var students = [{name: 'María Rojo', id: '1'}, {name: 'Manolo Rodriguez', id: '2'}, {name: 'Joao Pinto', id: '3'}]; funkce StudentListController ($ scope) {$ scope.students = students; } 

Zde jsme definovali seznam studentů a poté definujeme ovladač, pomocí kterého uvedený seznam předáme $ rozsah z ovladač, nyní musíme napsat kód HTML:

 
 
 {{jméno studenta}}

Zde vidíme, že definujeme náš seznam jako správce AngularJS a s tím i $ rozsah uvedeného ovladače nám umožňuje přístup k seznamu studentů, který poté používáme ng-opakovat vám řekne, že se chystáte vytvořit studenta pro každý prvek seznamu studentů a nakonec v

vytvoříme kotvu, která nás přenese na jiné místo v rámci aplikace. Podívejme se na následující obrázek, jak to vypadá v našem prohlížeči:

Funkce Splice ()Další věc, kterou můžeme udělat, je začlenit nové prvky do seznamu, k tomu máme funkci spojka ()Pokud jej například zapracujeme do tlačítka, které přidává nové studenty, změnu automaticky uvidíme, a to díky tomu, že AngularJS To nám dává ten dotek osvěžení v reálném čase dokumentu, aniž bychom museli stránku znovu načítat.
Podívejme se v následujícím kódu, jak by řadič vypadal pro přidání studenta:

 var students = [{name: 'María Rojo', id: '1'}, {name: 'Manolo Rodriguez', id: '2'}, {name: 'Joao Pinto', id: '3'}]; funkce StudentListController ($ scope) {$ scope.students = students; $ scope.addNew = function () {$ scope.students.splice (1, 0, {name: 'Joaquin Fernandez', id: '4'}); }; } 

Nyní musíme zavolat novou funkci v našem HTML, můžeme to udělat následujícím způsobem:

 {{jméno studenta}}

Vložit

Podívejme se, jak to vypadá v našem prohlížeči:

Vidíme, jak jsme přidali nového studenta do seznamu, ale pokaždé, když klikneme na tlačítko, přidáme stejnou osobu, je to proto, že jsme nevytvořili dynamický kód, ale to je další věc, kterou musíme zdůraznit, že museli jsme přidat do kterého jsme umístili ovladač, tímto způsobem jsme mohli začlenit naše tlačítko do $ rozsah.
Tímto tento tutoriál dokončíme, protože vidíme zpracování opakujících se prvků v AngularJS Je to docela jednoduché a dává nám možnost rychle vytvářet seznamy, jak jsme mohli vidět na příkladech.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod