Directive ng-repeat d'AngularJS

Manuel de référence AngularJS

Définition et utilisation

ng-repeat La directive répète un ensemble HTML un certain nombre de fois spécifié.

Chaque élément de la collection HTML sera répété une fois.

La collection doit être un tableau ou un objet.

Remarque :Chaque instance répétée recevra son propre scope, composé de l'élément courant.

Si vous avez une collection d'objets,ng-repeat Les directives sont très appropriées pour créer des tableaux HTML, affichant une ligne de tableau pour chaque objet et affichant une donnée de tableau pour chaque propriété de l'objet. Veuillez consulter l'exemple suivant.

Exemple

Exemple 1

Écrivez un titre pour chaque élément de l'array 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>

Essayez-le vous-même

Exemple 2

Écrivez une ligne de tableau pour chaque élément de l'array 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>

Essayez-le vous-même

Exemple 3

Écrivez une ligne de tableau pour chaque propriété de l'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

Syntaxe

<element ng-repeat="expression</element>

Tous les éléments HTML supportent.

Paramètres

Paramètres Description
expression

Expression spécifiant comment itérer sur un ensemble.

Exemple d'expression légitime :

x dans les enregistrements

(clé, valeur) dans myObj

x dans les enregistrements suivi par $id(x)

Manuel de référence AngularJS