[AngularJS]ng-repeat指令要点

　　ng-repeat指令要点

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

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