Direttiva ng-repeat di AngularJS con esempio
James Hartmann
Direttiva ng-repeat in AngularJS
. ng-ripetere La direttiva in AngularJS viene utilizzata per visualizzare i valori ripetuti definiti nel controller. A volte richiediamo la visualizzazione di un elenco di elementi nella vista. La direttiva ng-repeat ci aiuta a visualizzare un elenco di elementi definiti nel controller in una pagina di visualizzazione.
Esempio di direttiva ng-repeat di AngularJS
Diamo un'occhiata ad un esempio della direttiva ng-repeat in AngularJS:
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp" ng-controller="DemoController">
<h1>Topics</h1>
<ul><li ng-repeat="tpname in TopicNames">
{{tpname.name}}
</li></ul>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoController', function($scope){
$scope.TopicNames =[
{name: "What controller do from Angular's perspective"},
{name: "Controller Methods"},
{name: "Building a basic controller"}];
});
</script>
</body>
</html>
Spiegazione del codice:
- Nel controller, definiamo innanzitutto 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 collegata al nostro oggetto scope.
- Stiamo utilizzando i tag HTML di (Elenco non ordinato) e (Elenco elementi) per visualizzare l'elenco degli elementi nel nostro array. Utilizziamo quindi la direttiva ng-repeat per esaminare ogni singolo elemento del nostro array. La parola "tpname" è una variabile che viene utilizzata per puntare a ciascun elemento nell'array topics.TopicNames.
- In questo, visualizzeremo il valore di ciascun elemento dell'array.
Se il codice viene eseguito correttamente, verrà mostrato il seguente Output quando esegui il codice nel browser. Vedrai tutti gli elementi dell'array (in pratica 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 le diverse funzioni della logica aziendale. In precedenza abbiamo accennato alla presenza di 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.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp">
<div ng-controller="firstcontroller">
<div ng-controller="secondcontroller">
{{lname}}
</div>
</div>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('firstcontroller', function($scope){
$scope.pname="firstcontroller";
});
app.controller('secondcontroller', function($scope){
$scope.lname="secondcontroller";
});
</script>
</body>
</html>
Spiegazione del codice:
- Qui stiamo definendo 2 controller chiamati "firstController" e "secondController". Per ciascun controller stiamo anche aggiungendo del codice per l'elaborazione. Nel nostro firstController, alleghiamo una variabile chiamata "pname" che ha il valore "firstController", e nel secondController alleghiamo una variabile chiamata "lname" che ha il valore "secondController".
- Nella vista, stiamo accedendo a entrambi i controller e utilizzando la variabile membro del secondo controller.
Se il codice viene eseguito correttamente, verrà mostrato il seguente Output quando esegui il codice nel browser. Vedrai tutto il testo di "secondController" come previsto.
Produzione:
Sintesi
- La direttiva ng-repeat in AngularJS viene utilizzato per visualizzare più elementi ripetuti.
- Abbiamo anche dato un'occhiata a un controller avanzato che esaminava la definizione di più controller in un'applicazione.
