AngularJS - atkārtotu elementu apstrāde

Tīmekļa lietojumprogrammu galvenā daļa ir saraksta paraugsTas vienmēr būs svarīgi, kad strādāsim ar datu bāzēm, jo ​​mums ir jāparāda saglabātie vienumi, kā arī, piemēram, ja mēs vadām tiešsaistes veikalu, mums ir jāparāda produktu saraksts.
Mums ir jāsaprot, ka, lai gan ieraksti ir atšķirīgi, elementi kā tādi tiek atkārtoti, jo tie, iespējams, ir tabulas vai sakārtota saraksta rindas, neatkarīgi no satura atšķirības neatšķiras struktūrā.
AngularJS neapgrūtina mūsu dzīvi, vienkārši, ja mēs vēlamies izmantot vai izveidot sarakstu, kas mums jāizmanto ng-atkārtot kas izveido elementu katram saraksta elementam, ar to mēs varam nodot produktu sarakstu un viegli izveidot tabulu.
Pieņemsim, ka mēs veidojam skolas skolēnu sarakstu, galvenais ir izveidot sarakstu, parasti mēs to iegūtu no dažiem tīmekļa pakalpojums kas izmanto datu bāzi, bet, lai vienkāršotu, mēs paši izveidosim sarakstu, pēc tam šo sarakstu saucam par savu $ darbības joma lai varētu to izmantot, kopā ar to HTML mēs varam iekļaut instrukciju ng-atkārtot ko mēs jau minējām, apskatīsim šādu kodu:

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

Šeit mēs esam definējuši studentu sarakstu un pēc tam definējam kontrolieri, ar kuru mēs nododam šo sarakstu $ darbības joma no kontrolieris, tagad mums jāraksta kods HTML:

 
 
 {{studenta vārds}}

Šeit mēs redzam, ka mēs definējam savu sarakstu kā kontrolieri AngularJS un līdz ar to $ darbības joma no minētā kontroliera ļauj mums piekļūt studentu sarakstam, tad mēs izmantojam ng-atkārtot stāsta jums, ka jūs izveidosit studentu katram studentu saraksta elementam un visbeidzot

mēs izveidojam enkuru, kas mūs aizved uz citu lietojumprogrammas vietu. Apskatīsim šādu attēlu, kā tas izskatās mūsu pārlūkprogrammā:

Funkcija Splice ()Vēl viena lieta, ko mēs varam darīt, ir iekļaut sarakstā jaunus elementus, jo mums ir šī funkcija savienojums ()Ja, piemēram, mēs to iekļausim taustiņā, kas pievieno jaunus studentus, mēs automātiski redzēsim izmaiņas, pateicoties tam, ka AngularJS Tas mums sniedz atsvaidzināšanas pieskārienu dokumenta reāllaikā, bez lapas atkārtotas ielādes.
Tālāk redzēsim, kā kontrolieris izskatīsies, lai pievienotu studentu:

 var studenti = [{name: 'María Rojo', id: '1'}, {name: 'Manolo Rodriguez', id: '2'}, {name: 'Joao Pinto', id: '3'}]; funkcija StudentListController ($ skala) {$ ulatums.studenti = studenti; $ ulatums.addNew = funkcija () {$ darbības joma.students.splice (1, 0, {nosaukums: 'Joaquin Fernandez', id: '4'}); }; } 

Tagad mums vienkārši jāizsauc jaunā funkcija HTML, mēs to varam izdarīt šādā veidā:

 {{studenta vārds}}

Ievietot

Apskatīsim, kā tas izskatās mūsu pārlūkprogrammā:

Mēs redzam, kā esam pievienojuši jauno studentu sarakstam, tomēr ikreiz, kad mēs noklikšķinām uz pogas, mēs pievienojam vienu un to pašu personu, tas ir tāpēc, ka neesam izveidojuši dinamisku kodu, bet tas ir cits jautājums, kas mums jāuzsver mums bija pievienot a kurā mēs ievietojām kontrolieri, tādā veidā mēs varētu iekļaut savu pogu $ darbības joma.
Ar to mēs pabeidzam šo apmācību, jo redzam atkārtotu elementu apstrādi AngularJS Tas ir pavisam vienkārši un dod mums iespēju ātri izveidot sarakstus, kā mēs varētu redzēt piemēros.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu