AngularJS - Manipularea elementelor repetate

O parte cheie a aplicațiilor web este listarea eșantionuluiAcest lucru va fi întotdeauna important ori de câte ori lucrăm cu baze de date, deoarece trebuie să afișăm articole stocate, precum și, de exemplu, dacă rulăm un magazin online, trebuie să afișăm o listă de produse.
Ce trebuie să înțelegem că, deși înregistrările sunt diferite, elementele ca atare se repetă, deoarece sunt probabil rânduri ale unui tabel sau ale unei liste ordonate, indiferent de diferența de conținut care nu reprezintă o diferență de structură.
AngularJS nu ne complică viața, pur și simplu dacă vrem să folosim sau să facem o listă pe care trebuie să o folosim ng-repetare care creează un element pentru fiecare element conținut într-o listă, cu aceasta putem trece o listă de produse și putem genera cu ușurință un tabel.
Să presupunem că facem o listă de elevi pentru o școală, cheia este să generăm lista, în mod normal am obține-o de la unii serviciu web care consultă o bază de date, dar pentru a simplifica vom face noi înșine o listă, apoi o numim în lista noastră $ scop să îl puteți folosi, cu el în cadrul HTML putem încorpora instrucțiunea ng-repetare pe care le menționasem, să vedem următorul cod:

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

Aici am definit lista studenților și apoi definim controlerul cu care trecem lista respectivă către $ scop din controlor, acum trebuie să scriem codul HTML:

 
 
 {{numele studentului}}

Aici vedem că ne definim lista ca un controler al AngularJS și odată cu acesta $ scop controlerului menționat ne permite să accesăm lista studenților, apoi o folosim ng-repetare spunându-vă că veți crea un student pentru fiecare element din lista studenților și în cele din urmă în cadrul

creăm o ancoră care ne duce într-un alt loc din cadrul aplicației. Să vedem următoarea imagine a aspectului în browserul nostru:

Funcția Splice ()Un alt lucru pe care îl putem face este să încorporăm elemente noi în listă, pentru aceasta avem funcția splice ()Dacă, de exemplu, îl încorporăm într-un buton care adaugă noi studenți, vom vedea automat modificarea, datorită faptului că AngularJS Ne oferă acea notă de reîmprospătare în timp real a documentului fără a fi nevoie să reîncărcați pagina.
Să vedem în următorul cod cum ar arăta controlerul pentru a adăuga un student:

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

Acum trebuie doar să numim noua funcție în HTML, o putem face în felul următor:

 {{numele studentului}}

Introduce

Să vedem cum arată acest lucru în browserul nostru:

Vedem cum l-am adăugat pe noul student la listă, însă de fiecare dată când facem clic pe buton adăugăm aceeași persoană, acest lucru se datorează faptului că nu am creat un cod dinamic, dar aceasta este o altă chestiune, ceea ce trebuie să evidențiem este că trebuia adauga o la care am plasat controlerul, în acest fel am putea încorpora butonul nostru în $ scop.
Cu aceasta terminăm acest tutorial, așa cum vedem cum se manipulează elementele repetate în AngularJS Este destul de simplu și ne oferă posibilitatea de a crea liste rapid așa cum am putut vedea în exemple.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv