AngularJS ng-repeat instruction
AngularJS examples
Loop 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 = [
The "Tutorial 1"
"This tutorial 2"
The "Tutorial 3"
The "Tutorial 4"
]
});
</ Script>
</ Body>
<H1 ng-repeat = "x in records"> {{x}} </ h1>
<Script>
var app = angular.module ( "myApp", []);
app.controller ( "myCtrl", function ($ scope) {
$ Scope.records = [
The "Tutorial 1"
"This tutorial 2"
The "Tutorial 3"
The "Tutorial 4"
]
});
</ Script>
</ Body>
try it"
Definition and Usage
ng-repeat instruction loop output for a specified number of HTML elements.
Collection must be an array or object.
grammar
<Element ng-repeat = "expression "> </ element>
All HTML elements support the instruction.
Parameter Value
| value | description |
|---|---|
| expression | Expression defines how a collection cycle. Example rule expression: x in records (key, value) in myObj |
More examples
AngularJS examples
Using an array loop outputs 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 snabbkop",
"Country": "Sweden"
}, {
"Name": "Centro comercial Moctezuma",
"Country": "Mexico"
}, {
"Name": "Ernst Handel",
"Country": "Austria"
}
]
});
</ Script>
<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>
try it"
AngularJS examples
A cycle of the output using the object 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>
<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>
try it"