AngularJS- ng-repeatrichtlijn
Voorbeeld
Skryf een kopskrif vir elke item in die rekordskikking:
<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>
Definisie en gebruik
Die ng-repeatopdrag herhaal 'n stel HTML, 'n gegewe aantal kere.
Die stel HTML sal een keer per item in 'n versameling herhaal word.
Die versameling moet 'n skikking of 'n voorwerp wees.
Let wel: Elke geval van die herhaling kry sy eie omvang, wat bestaan uit die huidige item.
As jy 'n versameling voorwerpe het, is die ng-repeatopdrag perfek om 'n HTML-tabel te maak, wat een tabelry vir elke voorwerp en een tabeldata vir elke voorwerpeienskap vertoon. Sien voorbeeld hieronder.
Sintaksis
<element ng-repeat="expression"></element>
Ondersteun deur alle HTML-elemente.
Parameterwaardes
| Value | Description |
|---|---|
| expression | An expression that specifies how to loop the collection. Legal Expression examples: x in records
(key, value) in myObj |
Meer voorbeelde
Voorbeeld
Skryf een tabelry vir elke item in die rekordskikking:
<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
Skryf een tabelry vir elke eienskap in 'n voorwerp:
<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>