Angularjs ng-repeat Instruction
Angularjs instance
To cycle through multiple headings:
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ head>
<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 = [
"Rookie Tutorial 1",
"Rookie Tutorial 2",
"Rookie Tutorial 3",
"Rookie Tutorial 4",
]
});
</ script>
</ body>
</ html>
Definitions and usage
The ng-repeat instruction is used to iterate through the specified number of HTML elements.
The collection must be an array or an object.
Grammar
<element ng-repeat= "expression" ></element>
All HTML elements support this directive.
Parameter values
| value | Description |
|---|---|
| Expression | An expression defines how to loop a collection. An expression instance rule: X in records (key, value) in MyObj x in records track by $id (x) |
More examples
Angularjs instance
Output a table using an array loop:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<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",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"Country" : "Austria"
}
]
});
</script>
</body>
</html>
Run Result:
| Alfreds Futterkiste | Germany |
| Berglunds SNABBK | Sweden |
| Centro Comercial Moctezuma | Mexico |
| Ernst Handel | Austria |
Angularjs instance
Use objects to loop through a table:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<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>
</body>
</html>
Run Result:
| Name | Alfreds Futterkiste |
| Country | Germany |
| City | Berlin |
The above is the Angularjs ng-repeat instructions of the basic data collation, follow-up continue to add.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
