Beispiel
Schreiben Sie einen Header für jedes Element in der Aufzeichnungen-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 snabbkop",
"Centro
comercial Moctezuma",
"Ernst
Handel",
]
});
</script>
</body>
Versuch es selber " Definition und Verwendung
Die ng-repeat - Direktive wiederholt eine Reihe von HTML, eine bestimmte Anzahl von Zeiten.
Der Satz von HTML wird einmal in einer Sammlung pro Stück wiederholt werden.
Die Sammlung muss ein Array oder ein Objekt sein.
Hinweis: Jede Instanz der Wiederholung ist eine eigene Umfang gegeben, die aus dem aktuellen Element bestehen.
Wenn Sie eine Sammlung von Objekten, die ng-repeat - Richtlinie ist perfekt , um eine HTML - Tabelle und zeigt eine Zeile einer Tabelle für jedes Objekt, und eine Tabellendaten für jede Objekteigenschaft. Siehe Beispiel unten.
Syntax
< element ng-repeat=" expression "></ element >Unterstützt durch alle HTML-Elemente.
Parameterwerte
| Value | Description |
|---|---|
| expression | An expression that specifies how to loop the collection. Legal Expression examples: x in records
(key, value) in myObj |
Mehr Beispiele
Beispiel
Schreiben Sie eine Zeile einer Tabelle für jedes Element in der Aufzeichnungen-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 snabbkop",
"Country" : "Sweden"
},{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico"
},{
"Name" : "Ernst Handel",
"Country" : "Austria"
}
]
});
</script>
Versuch es selber " Beispiel
Schreiben Sie eine Zeile einer Tabelle für jede Eigenschaft in einem Objekt:
<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>
Versuch es selber "