AngularJS ng-repeat directive
AngularJS instance
Loop out multiple titles:
<!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>Definition and usage
The ng-repeat directive is used to loop out the HTML elements of a specified number of times.
The collection must be an array or object.
grammar
<element ng-repeat="expression"></element>
All HTML elements support this directive.
Parameter value
| value | describe |
|---|---|
| Expression | Expressions define how to loop a collection. Expression instance rules: x in records (key, value) in myObj x in records track by $id(x) |
More examples
AngularJS instance
Use an array to loop out 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"><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>Running results:
| Alfreds Futterkiste | Germany |
| Berglunds snabbk | Sweden |
| Centro comercial Moctezuma | Mexico |
| Ernst Handel | Austria |
AngularJS instance
Use an object to loop to output 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"><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>Running results:
| Name | Alfreds Futterkiste |
| Country | Germany |
| City | Berlin |
The above is the basic information sorting out the AngularJS ng-repeat directive, and will be supplemented later.