Tuto AngularJS

Liste AngularJS ng repeat

Comment utiliser la directive ng-repeat avec AngularJS? La directive ng-repeat en AngularJS est l'équivalent de foreach en PHP. Elle sert à afficher ou faire un traitement sur chaque élément d'un tableau ou d'un objet javascript. On peut y appliquer un ou plusieurs filtres pour classer par exemple les éléments par ordre alphabétique.

AngularJS ng-repeat exemple

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Test Schtroumpfs AngularJS ng-repeat</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="appli" ng-controller="leControlleur">
    <div ng-repeat="schtroumpf in lesSchtroumpfs">{{schtroumpf}}</div>
    <script>
        var app = angular.module("appli", []);
        app.controller("leControlleur", function($scope) {
            $scope.lesSchtroumpfs = [
                "Schtroumpf à lunettes",
                "Grand schtroumpf",
                "Schtroumpfette"
            ]
        });
    </script>
</body>
</html>

AngularJS ng-repeat filter exemple

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Test Schtroumpfs AngularJS ng-repeat filter</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="appli" ng-controller="leControlleur">
    <div ng-repeat="schtroumpf in lesSchtroumpfs | orderBy: schtroumpf">{{schtroumpf}}</div>
    <script>
        var app = angular.module("appli", []);
        app.controller("leControlleur", function($scope) {
            $scope.lesSchtroumpfs = [
                "Schtroumpf à lunettes",
                "Grand schtroumpf",
                "Schtroumpfette"
            ]
        });
    </script>
</body>
</html>

AngularJS ng-repeat clé valeur

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Test Schtroumpfs AngularJS ng-repeat key value</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="appli" ng-controller="leControlleur">
    <div ng-repeat="(key, value) in lesSchtroumpfs">{{key}} {{value}}</div>
    <script>
        var app = angular.module("appli", []);
        app.controller("leControlleur", function($scope) {
            $scope.lesSchtroumpfs = [
                "Schtroumpf à lunettes",
                "Grand schtroumpf",
                "Schtroumpfette"
            ]
        });
    </script>
</body>
</html>