AngularJS - pasikartojančių elementų tvarkymas

Pagrindinė žiniatinklio programų dalis yra sąrašo pavyzdysTai visada bus svarbu, kai dirbame su duomenų bazėmis, nes turime parodyti saugomus elementus, taip pat, pavyzdžiui, jei valdome internetinę parduotuvę, turime parodyti produktų sąrašą.
Turime suprasti, kad nors įrašai yra skirtingi, elementai kaip tokie kartojasi, nes jie tikriausiai yra lentelės eilės arba surikiuotas sąrašas, nesvarbu, koks turinio skirtumas nesiskiria nuo struktūros.
KampinisJS neapsunkina mūsų gyvenimo, tiesiog jei norime naudoti ar sudaryti sąrašą, kurį privalome naudoti ng-pakartokite kuris sukuria elementą kiekvienam sąrašo elementui, todėl galime perduoti produktų sąrašą ir lengvai sukurti lentelę.
Tarkime, kad sudarome mokyklos mokinių sąrašą, svarbiausia yra sudaryti sąrašą, paprastai jį gautume iš kai kurių žiniatinklio paslauga kuris konsultuojasi su duomenų baze, bet norėdami supaprastinti, mes patys sudarysime sąrašą, tada vadinsime šį sąrašą savo $ apimtis kad galėtumėte ja naudotis, kartu su HTML galime įtraukti instrukciją ng-pakartokite ką jau minėjome, pažiūrėkime šį kodą:

 var studentai = [{vardas: 'María Rojo', id: '1'}, {vardas: 'Manolo Rodriguez', id: '2'}, {vardas: 'Joao Pinto', id: '3'}]; funkcija StudentListController ($ apimtis) {$ ulatis.studentai = studentai; } 

Čia mes apibrėžėme studentų sąrašą ir tada nustatome valdiklį, su kuriuo perduodame šį sąrašą $ apimtis iš valdiklis, dabar turime parašyti kodą HTML:

 
 
 {{studento vardas}}

Čia matome, kad savo sąrašą apibrėžiame kaip valdytoją KampinisJS ir su juo $ apimtis iš minėto valdiklio leidžia mums pasiekti studentų sąrašą, tada mes naudojame ng-pakartokite sakydamas, kad ketinate sukurti studentą kiekvienam studentų sąrašo elementui ir galiausiai jo viduje

sukuriame inkarą, kuris nukelia mus į kitą programos vietą. Pažiūrėkime šį vaizdą, kaip tai atrodo mūsų naršyklėje:

Skaidymo () funkcijaKitas dalykas, kurį galime padaryti, yra įtraukti naujus elementus į sąrašą, nes mes turime šią funkciją sujungimas ()Pavyzdžiui, jei įtraukiame jį į mygtuką, kuris prideda naujų mokinių, pokyčius matysime automatiškai, nes KampinisJS Tai suteikia mums gaivos prisilietimą realiu dokumento laiku, nereikia iš naujo įkelti puslapio.
Pažvelkime į šį kodą, kaip valdiklis atrodytų, kaip pridėti mokinį:

 var studentai = [{vardas: 'María Rojo', id: '1'}, {vardas: 'Manolo Rodriguez', id: '2'}, {vardas: 'Joao Pinto', id: '3'}]; funkcija StudentListController ($ apimtis) {$ ulatis.studentai = studentai; $ ulatis.addNew = funkcija () {$ taikymo sritis.students.splice (1, 0, {pavadinimas: 'Joaquin Fernandez', id: '4'}); }; } 

Dabar mes tiesiog turime iškviesti naują funkciją HTML, galime tai padaryti taip:

 {{studento vardas}}

Įdėti

Pažiūrėkime, kaip tai atrodo mūsų naršyklėje:

Mes matome, kaip įtraukėme naują mokinį į sąrašą, tačiau kiekvieną kartą spustelėję mygtuką pridedame tą patį asmenį, nes tai nesukūrėme dinaminio kodo, bet tai yra kitas dalykas, kurį turime pabrėžti mes privalėjome Pridėti prie kurio įdėjome valdiklį, tokiu būdu galėjome įtraukti savo mygtuką į $ apimtis.
Tuo baigiame šią pamoką, nes matome, kaip tvarkomi pasikartojantys elementai KampinisJS Tai gana paprasta ir suteikia mums galimybę greitai sudaryti sąrašus, kaip matėme pavyzdžiuose.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką