Visualizzazione di informazioni ripetute
A volte ci può essere richiesto di visualizzare un elenco di elementi nella vista, quindi la domanda è: come possiamo visualizzare un elenco di elementi definiti nel nostro controller sulla nostra pagina di visualizzazione.
Angular fornisce una direttiva chiamata "ng-repeat" che può essere utilizzata per visualizzare i valori ripetuti definiti nel nostro controller.
Diamo un'occhiata a un esempio di come possiamo ottenere questo risultato.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Spiegazione del codice:
- Nel controller, definiamo prima il nostro array di elementi dell'elenco che vogliamo definire nella vista. Qui abbiamo definito un array chiamato "TopicNames" che contiene tre elementi. Ogni elemento è costituito da una coppia nome-valore.
- L'array di TopicsNames viene quindi aggiunto a una variabile membro chiamata "topics" e allegata al nostro oggetto scope.
- Stiamo usando i tag HTML di
- (Unordered List) e
- (List Item) per visualizzare l'elenco degli elementi nel nostro array. Quindi usiamo la direttiva ng-repeat per esaminare ogni singolo elemento nel nostro array. La parola "tpname" è una variabile utilizzata per puntare a ogni elemento nell'array topics.TopicNames.
- In questo, visualizzeremo il valore di ogni elemento dell'array.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser. Vedrai tutti gli elementi dell'array (fondamentalmente i TopicNames negli argomenti) visualizzati.
Produzione:
Controller multipli Angularjs
Un esempio di controller avanzato potrebbe essere il concetto di avere più controller in un'applicazione JS angolare.
Potrebbe essere necessario definire più controller per separare diverse funzioni di logica aziendale. In precedenza abbiamo menzionato di avere metodi diversi in un controller in cui un metodo aveva funzionalità separate per l'addizione e la sottrazione di numeri. Bene, puoi avere più controller per avere una separazione logica più avanzata. Ad esempio, puoi avere un controller che esegue solo operazioni sui numeri e l'altro che esegue operazioni sulle stringhe.
Diamo un'occhiata a un esempio di come possiamo definire più controller in un'applicazione angular.JS.
Event Registration Guru99 Global Event
{{lname}}
Spiegazione del codice:
- Qui stiamo definendo 2 controller chiamati "firstController" e "secondController". Per ogni controller stiamo aggiungendo anche del codice per l'elaborazione. Nel nostro firstController, alleghiamo una variabile chiamata "pname" che ha il valore "firstController", e nel secondController colleghiamo una variabile chiamata "lname" che ha il valore "secondController".
- Nella visualizzazione, stiamo accedendo a entrambi i controller e utilizzando la variabile membro dal secondo controller.
Se il codice viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser. Vedrai tutto il testo di "secondController" come previsto.
Produzione:
Sommario
- La direttiva ng-repeater può essere utilizzata per visualizzare più elementi ripetuti.
- Abbiamo anche esaminato un controller avanzato che ha esaminato la definizione di più controller in un'applicazione.