Viser gentagne oplysninger
Nogle gange kan det være nødvendigt, at vi viser en liste over emner i visningen, så spørgsmålet er, hvordan kan vi vise en liste over emner, der er defineret i vores controller, på vores visningsside.
Angular giver et direktiv kaldet "ng-repeat", som kan bruges til at vise gentagne værdier defineret i vores controller.
Lad os se på et eksempel på, hvordan vi kan opnå dette.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Kode Forklaring:
- I controlleren definerer vi først vores matrix med listeelementer, som vi vil definere i visningen. Herover har vi defineret et array kaldet "TopicNames", som indeholder tre elementer. Hvert element består af et navn-værdipar.
- Matrixen af TopicsNames føjes derefter til en medlemsvariabel kaldet "topics" og vedhæftes til vores scope-objekt.
- Vi bruger HTML-tags
- (Unordered List) og
- (List Item) til at vise listen over emner i vores array. Vi bruger derefter ng-gentagelsesdirektivet til at gennemgå hvert eneste element i vores array. Ordet "tpname" er en variabel, der bruges til at pege på hvert element i array-emnerne. Topicnavn.
- I dette viser vi værdien af hvert array-element.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren. Du vil se alle elementerne i arrayet (grundlæggende TopicNames i emner) vises.
Produktion:
Angularjs flere controllere
Et avanceret controllereksempel ville være begrebet at have flere controllere i en kantet JS-applikation.
Det kan være en god idé at definere flere controllere for at adskille forskellige forretningslogiske funktioner. Tidligere nævnte vi at have forskellige metoder i en controller, hvor en metode havde separat funktionalitet til addition og subtraktion af tal. Nå, du kan have flere controllere for at få en mere avanceret adskillelse af logik. For eksempel kan du have en controller, der kun opererer på numre, og den anden, der udfører operationer på strenge.
Lad os se på et eksempel på, hvordan vi kan definere flere controllere i en angular.JS-applikation.
Event Registration Guru99 Global Event
{{lname}}
Kode Forklaring:
- Her definerer vi 2 controllere kaldet "firstController" og "secondController". For hver controller tilføjer vi også kode til behandling. I vores firstController vedhæfter vi en variabel kaldet "pname", som har værdien "firstController", og i den andenController vedhæfter vi en variabel kaldet "lname", som har værdien "secondController".
- I visningen har vi adgang til begge controllere og bruger medlemsvariablen fra den anden controller.
Hvis koden udføres med succes, vises følgende output, når du kører din kode i browseren. Du vil se al tekst på "secondController" som forventet.
Produktion:
Resumé
- Direktivet om ng-repeater kan bruges til at vise flere gentagne emner.
- Vi kiggede også på en avanceret controller, der kiggede på definitionen af flere controllere i en applikation.