ng-repeatDirective AngularJS
Exemple
Écrivez un en-tête pour chaque élément du tableau records :
<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>
Définition et utilisation
La ng-repeatdirective répète un ensemble de HTML, un certain nombre de fois.
L'ensemble de HTML sera répété une fois par élément dans une collection.
La collection doit être un tableau ou un objet.
Remarque : Chaque instance de la répétition se voit attribuer sa propre portée, qui consiste en l'élément en cours.
Si vous avez une collection d'objets, la ng-repeatdirective est parfaite pour créer un tableau HTML, affichant une ligne de tableau pour chaque objet et une donnée de tableau pour chaque propriété d'objet. Voir l'exemple ci-dessous.
Syntaxe
<element ng-repeat="expression"></element>
Pris en charge par tous les éléments HTML.
Valeurs des paramètres
| Value | Description |
|---|---|
| expression | An expression that specifies how to loop the collection. Legal Expression examples: x in records
(key, value) in myObj |
Plus d'exemples
Exemple
Écrivez une ligne de tableau pour chaque élément du tableau records :
<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>
Exemple
Écrivez une ligne de tableau pour chaque propriété d'un objet :
<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>