Esempio
Scrivi una intestazione per ogni elemento dell'array 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 snabbkop",
"Centro
comercial Moctezuma",
"Ernst
Handel",
]
});
</script>
</body>
Prova tu stesso " Definizione e utilizzo
Il ng-repeat direttiva ripete un insieme di HTML, un dato numero di volte.
Il set di HTML sarà ripetuta una volta per ogni elemento in una collezione.
La raccolta deve essere un array o un oggetto.
Nota: Ogni istanza della ripetizione viene dato il proprio ambito, che consistono della voce corrente.
Se si dispone di una collezione di oggetti, il ng-repeat direttiva è perfetto per fare una tabella HTML, la visualizzazione di fila una tabella per ogni oggetto, e una tabella di dati per ogni oggetto di proprietà. Vedere l'esempio di seguito.
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 della tabella per ogni elemento dell'array 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 snabbkop",
"Country" : "Sweden"
},{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico"
},{
"Name" : "Ernst Handel",
"Country" : "Austria"
}
]
});
</script>
Prova tu stesso " Esempio
Scrivi una riga della tabella per ogni proprietà di 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>
Prova tu stesso "