[Angularjs]ng-repeat Command Essentials

ng-repeat Command Essentials

1, basic format, here do not make too much explanation, if necessary to view the document

<div  ng-repeat= "item in somecollection [| someFilter:arg1:arg2 ...]" >
<span>{{$index}}</span><span>{{item.someproperty}}</span><span>{{ Item.somefunction ()}}</span>
</div>

Where SOMEXXX representatives need to replace the content accordingly. $index is the ng-repeat built-in variable, which is the only numeric type, and the others have 5 bool types: $first, $middle, $last, $even, $odd

2, Traverse map (dictionary)

Definition of $scope data:

$scope. Item = {    content1: ' Content1 ',    key: ' Content1 '
Date: ' 2005-12-01 12:32 '}

HTML code Definition:

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

Output Result:

    Content1 ' Content1 ',    key  ' content1 ' date ' 2005-12-01 12:32 ' 

3, iterating through the array

Data definition in $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 code:

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

4,ng-repeat-start and Ng-repeat-end

Angular will repeat all HTML code blocks including the start and end two instruction elements

Data definition in $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 code:

<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 Command Essentials