AngularJS - Håndtering af gentagne elementer

En vigtig del af webapplikationer er listeprøveDette vil altid være vigtigt, når vi arbejder med databaser, da vi skal vise lagrede varer, for eksempel hvis vi driver en online butik, skal vi vise en liste over produkter.
Hvad vi skal forstå, at selvom posterne er forskellige, gentages elementerne som sådan, da de sandsynligvis er rækker i en tabel eller en ordnet liste, uanset forskellen i indhold ikke repræsenterer en forskel i struktur.
VinkelJS komplicerer ikke vores liv, simpelthen hvis vi vil bruge eller lave en liste, vi skal bruge ng-gentag der skaber et element for hvert element i en liste, med dette kan vi videregive en liste over produkter og nemt generere en tabel.
Lad os sige, at vi laver en liste over elever til en skole, nøglen er at generere listen, normalt ville vi få den fra nogle webservice der konsulterer en database, men for at forenkle laver vi selv en liste, så kalder vi denne liste i vores $ omfang at kunne bruge det, med det inden for HTML vi kan indarbejde instruktionen ng-gentag som vi havde nævnt, lad os se følgende kode:

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

Her har vi defineret listen over elever, og derefter definerer vi den controller, som vi sender listen til $ omfang af controller, nu skal vi skrive koden HTML:

 
 
 {{elevnavn}}

Her ser vi, at vi definerer vores liste som controller for VinkelJS og med det $ omfang af den nævnte controller giver os adgang til listen over elever, så bruger vi ng-gentag fortæller dig, at du skal oprette en elev for hvert element på elevlisten og til sidst inden for

vi skaber et anker, der tager os til et andet sted i applikationen. Lad os se følgende billede af, hvordan dette ser ud i vores browser:

Splice () funktionEn anden ting, vi kan gøre, er at indarbejde nye elementer på listen, til dette har vi funktionen splejs ()Hvis vi f.eks. Inkorporerer det i en knap, der tilføjer nye elever, ser vi automatisk ændringen takket være, at VinkelJS Det giver os det strejf af forfriskning i realtid af dokumentet uden at skulle genindlæse siden.
Lad os se i følgende kode, hvordan controlleren ville se ud for at tilføje en elev:

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

Nu skal vi bare kalde den nye funktion i vores HTML, kan vi gøre det på følgende måde:

 {{elevnavn}}

Indsæt

Lad os se, hvordan dette ser ud i vores browser:

Vi ser, hvordan vi har tilføjet den nye elev til listen, men hver gang vi klikker på knappen tilføjer vi den samme person, det er fordi vi ikke har lavet en dynamisk kode, men det er en anden sag, hvad vi skal fremhæve er, at Vi var nødt til Tilføj en hvortil vi placerede controlleren, på denne måde kunne vi indarbejde vores knap i $ omfang.
Med dette afslutter vi denne vejledning, da vi ser håndteringen af ​​gentagne elementer i VinkelJS Det er ganske enkelt og giver os mulighed for hurtigt at oprette lister, som vi kunne se i eksemplerne.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt