AngularJS基礎(chǔ) ng-repeat 指令簡單示例

2019-11-20 09:19:30

字體：大中小

供稿：網(wǎng)友

AngularJS ng-repeat 指令

AngularJS 實例

循環(huán)輸出多個標題:

<!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 = [ "菜鳥教程1", "菜鳥教程2", "菜鳥教程3", "菜鳥教程4", ]});</script></body></html>

定義和用法

ng-repeat 指令用于循環(huán)輸出指定次數(shù)的 HTML 元素。

集合必須是數(shù)組或?qū)ο蟆?br />

語法

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

參數(shù)值

值	描述
expression	表達式定義了如何循環(huán)集合。表達式實例規(guī)則: x in records (key, value) in myObj x in records track by $id(x)

更多實例

AngularJS 實例

使用數(shù)組循環(huán)輸出一個表格:

<!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>

運行結(jié)果：

Alfreds Futterkiste	Germany
Berglunds snabbk	Sweden
Centro comercial Moctezuma	Mexico
Ernst Handel	Austria

AngularJS 實例

使用對象循環(huán)輸出一個表格:

<!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>

運行結(jié)果：