AngularJS - Rukovanje ponavljajućim elementima

Ključni dio web aplikacija je popis uzorakTo će uvijek biti važno kad god radimo s bazama podataka, jer moramo prikazati pohranjene stavke, kao i, na primjer, ako vodimo internetsku trgovinu, moramo prikazati popis proizvoda.
Ono što moramo shvatiti da, iako su zapisi različiti, elementi kao takvi se ponavljaju, budući da su vjerojatno redovi tablice ili uređenog popisa, bez obzira na razliku u sadržaju ne predstavlja razliku u strukturi.
AngularJS ne komplicira naše živote, jednostavno ako želimo koristiti ili napraviti popis moramo koristiti ng-ponoviti koji stvara element za svaki element koji se nalazi na popisu, s tim možemo proslijediti popis proizvoda i jednostavno generirati tablicu.
Recimo da radimo popis učenika za školu, ključ je generiranje popisa, obično bismo ga dobili od nekih web servis koja se bavi bazom podataka, ali radi pojednostavljenja sami ćemo napraviti popis, a zatim taj popis nazivamo unutar našeg $ opseg da biste je mogli koristiti, s njom unutar HTML možemo uključiti upute ng-ponoviti koje smo spomenuli, pogledajmo sljedeći kod:

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

Ovdje smo definirali popis učenika, a zatim definiramo kontroler s kojim taj popis prosljeđujemo $ opseg od kontroler, sada moramo napisati kôd HTML:

 
 
 {{ime studenta}}

Ovdje vidimo da definiramo naš popis kao kontroler AngularJS a s njim i $ opseg spomenutog nam kontrolera omogućuje pristup popisu učenika, a zatim ih koristimo ng-ponoviti govoreći vam da ćete stvoriti učenika za svaki element popisa učenika i na kraju unutar

stvaramo sidro koje nas vodi na drugo mjesto unutar aplikacije. Pogledajmo sljedeću sliku kako to izgleda u našem pregledniku:

Splice () funkcijaJoš jedna stvar koju možemo učiniti je uvrstiti nove elemente u popis, za to imamo funkciju spojnica ()Ako ga, na primjer, ugradimo u gumb koji dodaje nove učenike, automatski ćemo vidjeti promjenu, zahvaljujući činjenici da AngularJS Daje nam dodir osvježenja u stvarnom vremenu dokumenta bez ponovnog učitavanja stranice.
Pogledajmo u sljedećem kodu kako bi kontroler izgledao za dodavanje učenika:

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

Sada samo moramo pozvati novu funkciju u našoj HTML, to možemo učiniti na sljedeći način:

 {{ime studenta}}

Umetnuti

Pogledajmo kako ovo izgleda u našem pregledniku:

Vidimo kako smo na popis dodali novog učenika, međutim svaki put kad pritisnemo gumb dodamo istu osobu, to je zato što nismo napravili dinamički kôd, ali to je druga stvar, ono što moramo istaknuti je da morali smo dodati na koji smo postavili kontroler, na ovaj način bismo mogli ugraditi naš gumb u $ opseg.
Ovim završavamo ovaj vodič, jer vidimo rukovanje ponovljenim elementima u AngularJS Vrlo je jednostavno i daje nam mogućnost da brzo stvorimo popise kao što smo mogli vidjeti u primjerima.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod