AngularJS ng-repeat Directive
AngularJS Example
Loop to output multiple titles:
<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 = [ "tutorialpro.org1", "tutorialpro.org2", "tutorialpro.org3", "tutorialpro.org4", ]});</script></body>
Definition and Usage
The ng-repeat directive is used to loop through elements for a specified number of times and output them.
The collection must be an array or an object.
Syntax
This directive is supported by all HTML elements.
Parameter Values
| Value | Description |
|---|---|
| expression | The expression defines how to loop through the collection. <br> <br>Expression example rules: <br> <br> x in records (key, value) in myObjx in records track by $id(x) |
More Examples
AngularJS Example
Loop through an array to output a table:
<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>
AngularJS Example
Loop through an object to output a table:
<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>