AngularJS - Håndtering av gjentagende elementer

En sentral del av webapplikasjoner er listeprøveDette vil alltid være viktig når vi jobber med databaser, siden vi må vise lagrede varer, så vel som for eksempel hvis vi driver en nettbutikk, må vi vise en liste over produkter.
Det vi må forstå at selv om postene er forskjellige, gjentas elementene som sådan, siden det sannsynligvis er rader i en tabell eller en ordnet liste, uansett forskjell i innhold ikke representerer en forskjell i struktur.
AngularJS kompliserer ikke livene våre, bare hvis vi vil bruke eller lage en liste vi må bruke ng-gjenta som lager et element for hvert element i en liste, med dette kan vi sende en liste over produkter og enkelt generere en tabell.
La oss si at vi lager en liste over elever for en skole, nøkkelen er å generere listen, normalt ville vi få den fra noen nettjeneste som konsulterer en database, men for å forenkle vil vi lage en liste selv, så kaller vi denne listen i vår $ omfang å kunne bruke den, med den i HTML vi kan inkorporere instruksjonen ng-gjenta som vi hadde nevnt, la oss se følgende kode:

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

Her har vi definert listen over studenter og deretter definerer vi kontrolleren som vi sender listen til $ omfang av kontrolleren, nå må vi skrive koden HTML:

 
 
 {{student navn}}

Her ser vi at vi definerer listen vår som kontroller av AngularJS og med det $ omfang av den nevnte kontrolleren gir oss tilgang til listen over studenter, så bruker vi ng-gjenta fortelle deg at du skal opprette en student for hvert element på studentlisten og til slutt i

vi lager et anker som tar oss til et annet sted i applikasjonen. La oss se følgende bilde av hvordan dette ser ut i nettleseren vår:

Splice () -funksjonEn annen ting vi kan gjøre er å inkludere nye elementer i listen, for dette har vi funksjonen spleise ()Hvis vi for eksempel inkorporerer det i en knapp som legger til nye studenter, vil vi automatisk se endringen, takket være det faktum at AngularJS Det gir oss det snevet av forfriskning i sanntid av dokumentet uten å måtte laste inn siden på nytt.
La oss se i følgende kode hvordan kontrolleren ville se ut for å legge til en student:

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

Nå må vi bare kalle den nye funksjonen i vår HTML, kan vi gjøre det på følgende måte:

 {{student navn}}

Sett inn

La oss se hvordan dette ser ut i nettleseren vår:

Vi ser hvordan vi har lagt den nye studenten til listen, men hver gang vi klikker på knappen legger vi til den samme personen, dette er fordi vi ikke har laget en dynamisk kode, men det er en annen sak, det vi må markere er at Vi måtte Legg til en som vi plasserte kontrolleren til, på denne måten kunne vi inkorporere knappen vår i $ omfang.
Med dette fullfører vi denne opplæringen, ettersom vi ser håndteringen av gjentatte elementer i AngularJS Det er ganske enkelt og gir oss muligheten til å lage lister raskt som vi kunne se i eksemplene.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng