AngularJS- ng-repeatrichtlijn
Voorbeeld
Schrijf één kop voor elk item in de records-array:
<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>
Definitie en gebruik
De ng-repeatrichtlijn herhaalt een reeks HTML, een bepaald aantal keren.
De set HTML wordt één keer herhaald per item in een verzameling.
De verzameling moet een array of een object zijn.
Opmerking: elk exemplaar van de herhaling krijgt zijn eigen bereik, dat bestaat uit het huidige item.
Als u een verzameling objecten hebt, is de ng-repeatrichtlijn perfect voor het maken van een HTML-tabel, waarbij één tabelrij voor elk object wordt weergegeven en één tabelgegevens voor elke objecteigenschap. Zie voorbeeld hieronder.
Syntaxis
<element ng-repeat="expression"></element>
Ondersteund door alle HTML-elementen.
Parameterwaarden
| Value | Description |
|---|---|
| expression | An expression that specifies how to loop the collection. Legal Expression examples: x in records
(key, value) in myObj |
Meer voorbeelden
Voorbeeld
Schrijf één tabelrij voor elk item in de records-array:
<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>
Voorbeeld
Schrijf één tabelrij voor elke eigenschap in een object:
<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>