Visar upprepad information
Ibland kan vi bli tvungna att visa en lista med objekt i vyn, så frågan är att hur kan vi visa en lista över objekt som definierats i vår kontroller på vår vy sida.
Angular tillhandahåller ett direktiv som kallas "ng-repeat" som kan användas för att visa upprepande värden definierade i vår controller.
Låt oss titta på ett exempel på hur vi kan uppnå detta.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Kodförklaring:
- I styrenheten definierar vi först vårt utbud av listobjekt som vi vill definiera i vyn. Här har vi definierat en array som heter "TopicNames" som innehåller tre objekt. Varje artikel består av ett namn-värde-par.
- Matrisen med TopicsNames läggs sedan till i en medlemsvariabel som kallas "topics" och bifogas vårt scope-objekt.
- Vi använder HTML-taggarna för
- (Unordered List) och
- (List Item) för att visa listan med objekt i vår array. Vi använder sedan ng-repeat-direktivet för att gå igenom varje objekt i vår matris. Ordet "tpname" är en variabel som används för att peka på varje objekt i array-ämnena. TopicNames.
- I detta kommer vi att visa värdet för varje array-objekt.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren. Du kommer att se alla objekt i matrisen (i princip TopicNames i ämnen) visas.
Produktion:
Angularjs flera styrenheter
Ett avancerat controllerexempel skulle vara konceptet att ha flera styrenheter i en vinkeljS-applikation.
Du kanske vill definiera flera styrenheter för att skilja olika affärslogikfunktioner. Tidigare nämnde vi om att ha olika metoder i en styrenhet där en metod hade separat funktion för att addera och subtrahera tal. Tja, du kan ha flera styrenheter för att få en mer avancerad separation av logik. Du kan till exempel ha en styrenhet som bara gör siffror och den andra som gör operationer på strängar.
Låt oss titta på ett exempel på hur vi kan definiera flera styrenheter i en angular.JS-applikation.
Event Registration Guru99 Global Event
{{lname}}
Kodförklaring:
- Här definierar vi två styrenheter som kallas "firstController" och "secondController". För varje controller lägger vi också till lite kod för bearbetning. I vår firstController bifogar vi en variabel som heter "pname" som har värdet "firstController" och i den andraController bifogar vi en variabel som heter "lname" som har värdet "secondController".
- I vyn har vi åtkomst till båda styrenheterna och använder medlemsvariabeln från den andra styrenheten.
Om koden körs framgångsrikt visas följande utdata när du kör din kod i webbläsaren. Du ser all text i "secondController" som förväntat.
Produktion:
Sammanfattning
- Direktivet om ng-repeater kan användas för att visa flera upprepade objekt.
- Vi tittade också på en avancerad styrenhet som tittade på definitionen av flera styrenheter i en applikation.