How to obtain index in nested ng-repeats

Question

I have an ng-repeat within a ng-repeat. I am tyring to obtain the index at both levels but am not able to :

<tbody>
    <tr ng-repeat="element in body">
      <td ng-repeat="h in header" style="width:{{h.width}}px">
        <div col="{{$parent.$parent.$index}}" row="{{$parent.$index}}">{{element[h.column]}}</div>
      <td>
    </tr>
  </tbody>

here is a plnkr too. http://plnkr.co/edit/dGoN43HzQefVpCsp2R3j

The ISSUE is that value of "col" never gets populated. It does not capture the index. Can anyone assist

do you want to set outer loop index to col and inner loop index to row? — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Mar 27, 2014 at 6:06

Poyraz Yilmaz · Accepted Answer · 2014-03-27 06:05:32Z

12

You do not have to use $parent, just use $index to get index of inner loop and use indexOf() function of array to get index of outer loop...

HTML

<tr ng-repeat="element in body">
  <td ng-repeat="h in header" style="width:{{h.width}}px">
    <div col="{{body.indexOf(element)}}" row="{{$index}}">{{element[h.column]}}</div>
  <td>
</tr>

UPDATE

Actually using ng-init would much better to get index of outer loop... here you can easily set rowIndex to current index at every turn and use it in inner loop...

  <tbody>
    <tr ng-repeat="element in body" ng-init="rowIndex = $index">
      <td ng-repeat="h in header" style="width:{{h.width}}px">
        <div col="{{$index}}" row="{{rowIndex}}">{{element[h.column]}}</div>
      <td>
    </tr>
  </tbody>

here is updated PLUNKER

edited Mar 27, 2014 at 6:05

answered Mar 25, 2014 at 17:31

Poyraz Yilmaz

5,8671 gold badge28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SoftEngi Over a year ago

Could you please suggest, how I can achieve the same if I am getting the outer loop list from a function call like <tr ng-repeat="element in getBodyElements()">

Poyraz Yilmaz Over a year ago

@SoftEngi it should be same. Why do you think it should be different then this or what is your problem exactly?

Collectives™ on Stack Overflow

How to obtain index in nested ng-repeats

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related