Can ng-repeat take user defined $index increment in Angular Js?

Question

Pure HTML:

<div class="table-tr museo_sans500">
    <div class="table-td"><a href="javascript:void(0)">fgfbgfbfg</a></div>
    <div class="table-td"><a href="javascript:void(0)">Wtrtrdgdgf</a></div>
    <div class="table-td"><a href="javascript:void(0)">Wayne Rooney</a</div>
    <div class="table-td"><a href="javascript:void(0)">fghgfhgfhgf</a></div>
</div>
<div class="table-tr museo_sans500">
    <div class="table-td"><a href="javascript:void(0)"hgfhgfhfg</a></div>
    <div class="table-td"><a href="javascript:void(0)">asdasdasdas</a></div>
    <div class="table-td"><a href="javascript:void(0)">testsfsdfs</a></div>
    <div class="table-td"><a href="javascript:void(0)">gfhgfhfghgf</a></div>
</div>

I need to make it dynamic and I am using Angular JS and PHP. I already get the data in angular $scope.teamSquad and implement it in following way:

<div class="table-tr museo_sans500" ng-repeat="(key,squad) in teamSquad">
     <div class="table-td"><a href="javascript:void(0)">{{squad.PlayerName}}</a></div>
</div>

But I am having problem in adding </div><div class="table-tr museo_sans500"> after every more values.

I have already tried {{key%4==0 ? '</div><div class="table-tr museo_sans500">' : ''}} but it doesn't work.

I also tried but result was same.

what you actually need is nested ng-repeat. The way you are trying right now will never work — harishr, Sep 14 '15 at 11:55
@entre I also tried thinking about a nested ng-repeat logic but still failed. — Farjad Hasan, Sep 14 '15 at 12:00
would you like to add separate the div section every FOUR players? — codeninja.sj, Sep 14 '15 at 12:05
@codeninja yes, i want to make separate div section every four players — Farjad Hasan, Sep 14 '15 at 12:07

score 1 · Accepted Answer · answered Sep 14 '15 at 12:31

As @entre said, you should use nested ng-repeat to accomplish this task

 <div class="table-tr museo_sans500" ng-repeat="squadChunk in teamSquad">
   <div class="table-td" ng-repeat="squad in squadChunk"><a href="javascript:void(0)">{{squad.PlayerName}}</div>
</div>

Split your array into chunks (size of 4)

var _teamSquad = [
{PlayerName: 1},
{PlayerName: 2},
{PlayerName: 3},
{PlayerName: 4},
{PlayerName: 5},
{PlayerName: 6},
{PlayerName: 7},
{PlayerName: 8}
];

$scope.teamSquad = [];

var size = 4;
while (_teamSquad.length > 0)
$scope.teamSquad.push(_teamSquad.splice(0, size));

Complete Solution

Can ng-repeat take user defined $index increment in Angular Js?

1 Answers1