ng-repeat
Direttiva AngularJS
Esempio
Scrivi un'intestazione per ogni elemento nell'array dei record:
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">{{x}}</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
]
});
</script>
</body>
Definizione e utilizzo
La ng-repeat
direttiva ripete un insieme di HTML, un determinato numero di volte.
Il set di HTML verrà ripetuto una volta per elemento in una raccolta.
La raccolta deve essere una matrice o un oggetto.
Nota: a ogni istanza della ripetizione viene assegnato il proprio ambito, che consiste nell'elemento corrente.
Se si dispone di una raccolta di oggetti, la ng-repeat
direttiva è perfetta per creare una tabella HTML, visualizzare una riga di tabella per ogni oggetto e una tabella di dati per ogni proprietà dell'oggetto. Vedi esempio sotto.
Sintassi
<element ng-repeat="expression"></element>
Supportato da tutti gli elementi HTML.
Valori dei parametri
Value | Description |
---|---|
expression | An expression that specifies how to loop the collection. Legal Expression examples: x in records
(key, value) in myObj |
Altri esempi
Esempio
Scrivi una riga di tabella per ogni elemento nell'array di record:
<table ng-controller="myCtrl" border="1">
<tr ng-repeat="x in records">
<td>{{x.Name}}</td>
<td>{{x.Country}}</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{
"Name" : "Alfreds Futterkiste",
"Country" : "Germany"
},{
"Name" : "Berglunds snabbköp",
"Country" : "Sweden"
},{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico"
},{
"Name" : "Ernst Handel",
"Country" : "Austria"
}
]
});
</script>
Esempio
Scrivi una riga di tabella per ogni proprietà in un oggetto:
<table ng-controller="myCtrl" border="1">
<tr ng-repeat="(x, y) in myObj">
<td>{{x}}</td>
<td>{{y}}</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"Name" : "Alfreds Futterkiste",
"Country" : "Germany",
"City" : "Berlin"
}
});
</script>