[AngularJS]ng-repeat指令要点

   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>

 

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