AngularJS - Hantering av upprepande element

En viktig del av webbapplikationer är listprovDetta kommer alltid att vara viktigt när vi arbetar med databaser, eftersom vi måste visa lagrade objekt, liksom till exempel om vi driver en webbutik, måste vi visa en lista med produkter.
Vad vi måste förstå att även om posterna är olika, upprepas elementen som sådana, eftersom de förmodligen är rader i en tabell eller en ordnad lista, oavsett vad skillnaden i innehåll inte representerar en skillnad i struktur.
AngularJS inte komplicerar våra liv, helt enkelt om vi vill använda eller göra en lista som vi måste använda ng-upprepa som skapar ett element för varje element i en lista, med detta kan vi skicka en lista med produkter och enkelt skapa en tabell.
Låt oss säga att vi gör en lista med elever för en skola, nyckeln är att generera listan, normalt skulle vi få den från några webb-service som konsulterar en databas men för att förenkla kommer vi att göra en lista själva, då kallar vi denna lista inom vår $ omfattning för att kunna använda den, med den inom HTML vi kan införliva instruktionen ng-upprepa som vi nämnde, låt oss se följande kod:

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

Här har vi definierat studentlistan och sedan definierar vi kontrollen med vilken vi skickar listan till $ omfattning av kontroller, nu måste vi skriva koden HTML:

 
 
 {{elevs namn}}

Här ser vi att vi definierar vår lista som en controller för AngularJS och med det $ omfattning av nämnda kontroller tillåter oss att komma åt listan över studenter, sedan använder vi ng-upprepa berätta att du ska skapa en elev för varje element i studentlistan och slutligen inom

vi skapar ett ankare som tar oss till en annan plats i applikationen. Låt oss se följande bild av hur det ser ut i vår webbläsare:

Splice () -funktionEn annan sak vi kan göra är att införliva nya element i listan, för detta har vi funktionen skarva ()Om vi ​​till exempel integrerar det i en knapp som lägger till nya studenter, ser vi automatiskt förändringen, tack vare att AngularJS Det ger oss den touchen av uppdatering i realtid av dokumentet utan att behöva ladda om sidan.
Låt oss se i följande kod hur regulatorn skulle se ut för att lägga till en elev:

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

Nu måste vi bara kalla den nya funktionen i vår HTML, vi kan göra det på följande sätt:

 {{elevs namn}}

Föra in

Låt oss se hur detta ser ut i vår webbläsare:

Vi ser hur vi har lagt till den nya studenten på listan, men varje gång vi klickar på knappen lägger vi till samma person, detta beror på att vi inte har skapat en dynamisk kod, men det är en annan sak, det vi måste lyfta fram är att vi behövde Lägg till en till vilken vi placerade handkontrollen, på så sätt kunde vi införliva vår knapp i $ omfattning.
Med detta avslutar vi denna handledning, eftersom vi ser hanteringen av upprepade element i AngularJS Det är ganska enkelt och ger oss möjlighet att skapa listor snabbt som vi kunde se i exemplen.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng