Latest web development tutorials

AngularJS ng-repeat 指令

AngularJS 參考手冊 AngularJS參考手冊


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 >

嘗試一下»

定義和用法

ng-repeat指令用於循環輸出指定次數的HTML元素。

集合必須是數組或對象。


語法

< element ng-repeat= " expression " > < / element >

所有的HTML 元素都支持該指令。


參數值

描述
expression 表達式定義瞭如何循環集合。

表達式實例規則:

x in records

(key, value) in myObj

x in records track by $id(x)

更多實例

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 >

嘗試一下»

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 >

嘗試一下»

AngularJS 參考手冊 AngularJS參考手冊