Angularjs incremental counter on nested ng-repeat

Question

I have situation where i wanted to maintain a counter on nested ng-repeat

<ul>
    <li ng-repeat="some in something">
        <span> index {{someCounter}} </span>
        <ul>
            <li ng-repeat="chid in some">
                <span> index {{someCounter}} </span>
            </li>
        </ul>
    </li>
</ul>

which should output following

index 0
- index 1
- index 2
index 3

In short instead of having seperate index for each ng-repeat i want to have same index continue with each ng-repeat

Thanks

score 0 · Answer 1 · answered Dec 02 '14 at 18:23

There is no easy way to achieve this that I know of. What you would need to do is pre-process the object which is being repeated and assign a counter to it in a loop fashion. I can't think of a way to do this in HTML alone. Also, I don't think this would work with arrays, here is my attempt:

The assumption is that you would sort the objects at some point so that they appear in order:

$scope.something = [
      {one: {ten: 10}, eleven: {nine: 9}, hundred: {blue: 100}}, 
      {one: {ten: 10}, eleven: {nine: 9}, hundred: {blue: 100}}, 
      {one: {ten: 10}, eleven: {nine: 9}, hundred: {blue: 100}}, 
      {one: {ten: 10}, eleven: {nine: 9}, hundred: {blue: 100}}, 
      {one: {ten: 10}, eleven: {nine: 9}, hundred: {blue: 100}}, 
      ];

var counter = 0;
angular.forEach($scope.something, function(value, index){
  //console.log(value); 
  value.counter = counter++;

  angular.forEach(value, function(subValue, subIndex){
    //console.log(subValue); 
    subValue.counter = counter++; 
  });

});
console.log($scope.something);

HTML:

<ul >
    <li ng-repeat="some in something" > 
        <span > index {{some.counter}}</span>
        <ul>
            <li ng-repeat="(key, child) in some" ng-if="key != 'counter'" > 
                <span> index {{child.counter}} </span>
            </li>
        </ul>
    </li>
</ul>

Plunker: http://plnkr.co/edit/98AnSbO2fpdsFuo3hVCz?p=preview

Basically, you need to do an in-order traversal, but using ng-repeat does a pre-order traversal, so you need to process it on the JS side. — SoluableNonagon, Dec 02 '14 at 18:46

score 0 · Answer 2 · edited May 23 '17 at 12:01

Maintaining separate counters on nested ng-repeat is easy.

you can use following syntax to get a counter (col) in nested ng-repeat. Although track by $index in still required, you don't need to use it in your logic since you have counter col.

ng-repeat="(col, t) in h.seats track by $index"

I have an array which i wanted to convert into a grid/matrix of column size 4. the following implementation worked for me. You can use the two counters : row and col as you like in side the nested ng-repeat

        <tbody>
            <tr ng-repeat="(row, y) in getNumber(h.seats.length, 3) track by $index">
                <td>{{row+1}}</td>
                <td class="text-primary" ng-class="appliedClass(!t.status)"
                    ng-repeat="(col, t) in h.seats track by $index"
                    ng-if="col >= (row)*3 && col < (row+1)*3">
                        <span ng-show="t.status"> X </span> 
                        <span ng-show="!t.status"> - </span>
                </td>
            </tr>
        </tbody>

For details on how the counter works, visit https://stackoverflow.com/a/35566132/5076414

Angularjs incremental counter on nested ng-repeat

2 Answers2