[AngularJS]ng-repeat指令要点

浏览数：425 / 时间：2015年06月09日

　　ng-repeat指令要点

　　1，基本格式，这里不作过多说明，需要的话查看文档

<div  ng-repeat="item in someCollection [| someFilter:arg1:arg2 ...]">
　　<span>{{$index}}</span><span>{{item.someProperty}}</span><span>{{item.someFunction()}}</span>
</div>

　　其中someXXX代表需要相应替换内容。$index是ng-repeat 内置变量，这是唯一一个数值型的，其他还有5个bool类型的：$first,$middle,$last,$even,$odd

　　2，遍历map（字典）

$scope数据的定义：

$scope.item = {
    content1: ‘content1‘,
    key: ‘content1‘
　　 date:‘2005-12-01 12:32‘
}

HTML代码定义：

<div ng-repeat=‘(id,value) in item‘>
    <span>{{id}}</span>&nbsp;<span>{{value}}</span>
</div>

输出结果：

    content1 ‘content1‘,
    key  ‘content1‘
　　date ‘2005-12-01 12:32‘

　　3，遍历数组

$scope中数据定义:

$scope.itemList=[{id:201,name:‘abc‘,amount:100},{id:100,name:‘zdb‘,amount:100},
{id:10,name:‘xxx‘,amount:200},{id:80,name:‘231‘,amount:1020},
{id:50,name:‘ppp‘,amount:20},{id:1,name:‘hhh‘,amount:1100}];

HTML代码：

<div class="row" ng-repeat="item in itemList">
　　<span>{{item.id}}-{{item.name}}-{{item.amount}}</span>
</div>

　　4，ng-repeat-start和ng-repeat-end

angular会重复包括start和end两个指令所在元素在内的所有html代码块

$scope中数据定义:

$scope.itemList=[{id:201,name:‘abc‘,amount:100,details:[{id:0,model:‘#2‘,amount:34}，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　{id:0,model:‘#2‘,amount:66}]},
{id:100,name:‘zdb‘,amount:100,details:[{id:0,model:‘#200‘,amount:34}，
　　　　　　　　　　　　　　　　　　　　　　　{id:1,model:‘#203‘,amount:66}]},
{id:10,name:‘xxx‘,amount:200,details:[{id:0,model:‘#211‘,amount:34}，
　　　　　　　　　　　　　　　　　　　　　　　　{id:1,model:‘#132‘,amount:166}]},
{id:80,name:‘231‘,amount:1020,details:[{id:0,model:‘#112‘,amount:360}，
　　　　　　　　　　　　　　　　　　　　　　　　{id:1,model:‘#234‘,amount:660}]},
{id:50,name:‘ppp‘,amount:20,details:[{id:0,model:‘#223‘,amount:14}，
　　　　　　　　　　　　　　　　　　　　　　{id:2,model:‘#212‘,amount:6}]},
{id:1,name:‘hhh‘,amount:1100,details:[{id:0,model:‘#452‘,amount:340}，
　　　　　　　　　　　　　　　　　　　　　　{id:1,model:‘#225‘,amount:760}]}];

HTML代码：

<div class="row" ng-repeat-start="item in itemList">　　
</div>
　　<div ng-repeat="sub in item.details">
　　　　<span>{{item.id}}-{{item.name}}-{{item.amount}}</span>
　　</div>
<div ng-repeat-end>
　　<div class=‘summary‘><span>{{item.id}}-{{item.name}}-{{item.amount}}</span></div>
</div>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

[AngularJS]ng-repeat指令要点