Herhaalde informatie weergeven
Soms is het mogelijk dat we een lijst met items in de weergave moeten weergeven, dus de vraag is hoe we een lijst met items die in onze controller zijn gedefinieerd, op onze weergavepagina kunnen weergeven.
Angular biedt een richtlijn genaamd "ng-repeat" die kan worden gebruikt om herhalende waarden weer te geven die zijn gedefinieerd in onze controller.
Laten we eens kijken naar een voorbeeld van hoe we dit kunnen bereiken.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Code Verklaring:
- In de controller definiëren we eerst onze reeks lijstitems die we in de weergave willen definiëren. Hier hebben we een array met de naam "TopicNames" gedefinieerd die drie items bevat. Elk item bestaat uit een naam-waarde-paar.
- De reeks TopicsNames wordt vervolgens toegevoegd aan een lidvariabele genaamd "topics" en toegevoegd aan ons scope-object.
- We gebruiken de HTML-tags
- (Unordered List) en
- (List Item) om de lijst met items in onze array weer te geven. We gebruiken dan de richtlijn ng-repeat om door elk item in onze array te gaan. Het woord "tpname" is een variabele die wordt gebruikt om naar elk item in de array topics.TopicNames te verwijzen.
- Hierin zullen we de waarde van elk array-item weergeven.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert. U ziet alle items van de array (in feite de TopicNames in onderwerpen) weergegeven.
Uitgang:
Angularjs Meerdere controllers
Een voorbeeld van een geavanceerd controller is het concept van meerdere controllers in een hoekige JS-applicatie.
Misschien wilt u meerdere controllers definiëren om verschillende bedrijfslogica-functies te scheiden. Eerder hadden we het over het hebben van verschillende methoden in een controller waarbij één methode afzonderlijke functionaliteit had voor het optellen en aftrekken van getallen. Welnu, u kunt meerdere controllers hebben om een meer geavanceerde scheiding van logica te hebben. U kunt bijvoorbeeld één controller hebben die alleen bewerkingen op getallen uitvoert en de andere die bewerkingen op strings uitvoert.
Laten we eens kijken naar een voorbeeld van hoe we meerdere controllers kunnen definiëren in een angular.JS-applicatie.
Event Registration Guru99 Global Event
{{lname}}
Code Verklaring:
- Hier definiëren we 2 controllers genaamd "firstController" en "secondController". Voor elke controller voegen we ook een code toe voor verwerking. In onze firstController koppelen we een variabele genaamd "pname" die de waarde "firstController" heeft, en in de secondController koppelen we een variabele genaamd "lname" met de waarde "secondController".
- In de weergave hebben we toegang tot beide controllers en gebruiken we de lidvariabele van de tweede controller.
Als de code met succes is uitgevoerd, wordt de volgende uitvoer weergegeven wanneer u uw code in de browser uitvoert. U ziet alle tekst van "secondController" zoals verwacht.
Uitgang:
Overzicht
- De instructie ng-repeater kan worden gebruikt om meerdere herhalende items weer te geven.
- We hebben ook gekeken naar een geavanceerde controller die keek naar de definitie van meerdere controllers in een applicatie.