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 snabbköp",            
 "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 参考手册

0 个评论

要回复文章请先登录注册