Exemple
Ecrire un en-tête pour chaque élément dans le tableau d'enregistrements:
<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>
Essayez - le vous - même » Définition et utilisation
Le ng-repeat directive reprend un ensemble de HTML, un certain nombre de fois.
L'ensemble de HTML sera répété une fois par article dans une collection.
La collection doit être un tableau ou un objet.
Remarque: Chaque instance de la répétition est donnée sa propre portée, qui se composent de l'élément en cours.
Si vous avez une collection d'objets, le ng-repeat directive est parfait pour faire une table de HTML, l' affichage d' une ligne de tableau pour chaque objet, et une donnée de table pour chaque objet propriété. Voir l'exemple ci-dessous.
Syntaxe
< element ng-repeat=" expression "></ element >Pris en charge par tous les éléments HTML.
Paramètre valeurs
| Value | Description |
|---|---|
| expression | An expression that specifies how to loop the collection. Legal Expression examples: x in records
(key, value) in myObj |
Autres exemples
Exemple
Ecrire une ligne du tableau pour chaque élément dans le tableau d'enregistrements:
<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>
Essayez - le vous - même » Exemple
Ecrire une ligne du 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>
Essayez - le vous - même »