Viser gjentatt informasjon
Noen ganger kan det hende at vi blir bedt om å vise en liste over elementer i visningen, så spørsmålet er at hvordan kan vi vise en liste over elementer som er definert i kontrolleren vår på visningssiden vår.
Angular gir et direktiv kalt "ng-repeat" som kan brukes til å vise gjentatte verdier definert i kontrolleren vår.
La oss se på et eksempel på hvordan vi kan oppnå dette.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Kode Forklaring:
- I kontrolleren definerer vi først vårt utvalg av listeelementer som vi vil definere i visningen. Her har vi definert en matrise kalt "TopicNames" som inneholder tre elementer. Hver vare består av et navn-verdi-par.
- Utvalget av TopicsNames blir deretter lagt til i en medlemsvariabel kalt "topics" og festet til vårt scope-objekt.
- Vi bruker HTML-kodene til
- (Unordered List) og
- (List Item) for å vise listen over elementer i matrisen vår. Vi bruker deretter ng-repeat-direktivet for å gå gjennom hvert eneste element i vårt utvalg. Ordet "tpname" er en variabel som brukes til å peke på hvert element i array-emnene.TopicNames.
- I dette vil vi vise verdien av hvert array-element.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren. Du vil se alle elementene i matrisen (i utgangspunktet TopicNames in topics) vises.
Produksjon:
Angularjs flere kontrollere
Et avansert kontrollereksempel vil være konseptet med å ha flere kontrollere i en kantet JS-applikasjon.
Det kan være lurt å definere flere kontrollere for å skille forskjellige forretningslogiske funksjoner. Tidligere nevnte vi om å ha forskjellige metoder i en kontroller der en metode hadde separat funksjonalitet for addisjon og subtraksjon av tall. Vel, du kan ha flere kontrollere for å få en mer avansert separasjon av logikken. For eksempel kan du ha en kontroller som bare opererer på tall og den andre som utfører operasjoner på strenger.
La oss se på et eksempel på hvordan vi kan definere flere kontrollere i en angular.JS-applikasjon.
Event Registration Guru99 Global Event
{{lname}}
Kode Forklaring:
- Her definerer vi to kontrollere kalt "firstController" og "secondController". For hver kontroller legger vi også til litt kode for behandling. I vår firstController legger vi til en variabel kalt "pname" som har verdien "firstController", og i den andreController fester vi en variabel kalt "lname" som har verdien "secondController".
- I visningen har vi tilgang til begge kontrollerne og bruker medlemsvariabelen fra den andre kontrolleren.
Hvis koden er utført vellykket, vil følgende utdata vises når du kjører koden din i nettleseren. Du vil se all teksten til "secondController" som forventet.
Produksjon:
Sammendrag
- Direktivet om ng-repeater kan brukes til å vise flere repeterende gjenstander.
- Vi så også på en avansert kontroller som så på definisjonen av flere kontrollere i et program.