AngularJS ng-repeat 指令
AngularJS 實例
循環輸出多個標題:
< 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 = [
"本教程1",
"本教程2",
"本教程3",
"本教程4",
]
});
< /script >
< /body >
< h1 ng-repeat= "x in records" > {{x}} < /h1 >
< script >
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"本教程1",
"本教程2",
"本教程3",
"本教程4",
]
});
< /script >
< /body >
嘗試一下»
定義和用法
ng-repeat指令用於循環輸出指定次數的HTML元素。
集合必須是數組或對象。
語法
< element ng-repeat= " expression " > < / element >
所有的HTML 元素都支持該指令。
參數值
值 | 描述 |
---|---|
expression | 表達式定義瞭如何循環集合。 表達式實例規則: x in records (key, value) in myObj |
更多實例
AngularJS 實例
使用數組循環輸出一個表格:
< 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 >
嘗試一下»
AngularJS 實例
使用對象循環輸出一個表格:
< 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 >
嘗試一下»