AngularJS - Omgaan met herhalende elementen

Een belangrijk onderdeel van webapplicaties is de lijstvoorbeeld:Dit zal altijd belangrijk zijn wanneer we met databases werken, omdat we opgeslagen items moeten tonen, en als we bijvoorbeeld een online winkel hebben, moeten we een lijst met producten tonen.
Wat we moeten begrijpen, is dat hoewel de records verschillend zijn, de elementen als zodanig worden herhaald, aangezien het waarschijnlijk rijen van een tabel of een geordende lijst zijn, ongeacht het verschil in inhoud, geen verschil in structuur vertegenwoordigt.
AngularJS maakt ons leven niet ingewikkelder, gewoon als we een lijst willen gebruiken of maken die we moeten gebruiken ng-repeat die een element maakt voor elk element in een lijst, hiermee kunnen we een lijst met producten doorgeven en eenvoudig een tabel genereren.
Laten we zeggen dat we een lijst met studenten maken voor een school, de sleutel is om de lijst te genereren, normaal gesproken zouden we deze van sommige webservice die raadpleegt een database maar voor de vereenvoudiging zullen we zelf een lijst maken, dan noemen we deze lijst binnen onze $ bereik om het te kunnen gebruiken, met het binnen de HTML we kunnen de instructie opnemen! ng-repeat die we hadden genoemd, laten we de volgende code bekijken:

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

Hier hebben we de lijst met studenten gedefinieerd en vervolgens definiëren we de controller waarmee we de lijst doorgeven aan de $ bereik van de controleur, nu moeten we de code schrijven HTML:

 
 
 {{studenten naam}}

Hier zien we dat we onze lijst definiëren als een controller van AngularJS en daarmee de $ bereik van de genoemde controller geeft ons toegang tot de lijst met studenten, dan gebruiken we ng-repeat u vertellen dat u een leerling gaat maken voor elk element van de leerlingenlijst en uiteindelijk binnen de

we creëren een anker dat ons naar een andere plaats binnen de applicatie brengt. Laten we de volgende afbeelding bekijken van hoe dit eruit ziet in onze browser:

Splice () functieEen ander ding dat we kunnen doen is nieuwe elementen in de lijst opnemen, hiervoor hebben we de functie splitsen ()Als we het bijvoorbeeld opnemen in een knop die nieuwe studenten toevoegt, zien we de verandering automatisch, dankzij het feit dat AngularJS Het geeft ons dat vleugje verfrissing in realtime van het document zonder de pagina opnieuw te hoeven laden.
Laten we in de volgende code kijken hoe de controller eruit zou zien om een ​​student toe te voegen:

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

Nu hoeven we alleen nog maar de nieuwe functie aan te roepen in onze HTML, kunnen we het op de volgende manier doen:

 {{studenten naam}}

Invoegen

Laten we eens kijken hoe dit eruit ziet in onze browser:

We zien hoe we de nieuwe student aan de lijst hebben toegevoegd, maar elke keer dat we op de knop klikken, voegen we dezelfde persoon toe, dit komt omdat we geen dynamische code hebben gemaakt, maar dat is een andere zaak, wat we moeten benadrukken is dat we moesten Voeg een … toe waarop we de controller hebben geplaatst, op deze manier konden we onze knop opnemen in de $ bereik.
Hiermee sluiten we deze tutorial af, aangezien we de behandeling van herhaalde elementen zien in AngularJS Het is vrij eenvoudig en geeft ons de mogelijkheid om snel lijsten te maken, zoals we in de voorbeelden konden zien.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven