CODEWITHSUNDEEP
javascriptangularjs
Shift 'n Tab
Shift 'n Tab

Reputation: 9453

How to get the parent $index of a nested ng-repeat

anyone knows how to get the first level $index of a nested ng-repeat?

Here is my data:

vm.rooms = [
      {
          name: 'Room1', students: ['Cal', 'Ryan', 'Luigi', 'Joel']
      },
      {
          name: 'Room2', students: ['Jaime', 'Sherwin', 'Gami', 'Beau']
      },
      {
          name: 'Room3', students: ['Roel', 'Edwin', 'Carl', 'Necho']
      }
  ]

And i want to get this output:

Room1 - Idx: 0
    Cal - Idx: 0 on room idx: 0
    Ryan - Idx: 1 on room idx: 0
    Luigi - Idx: 2 on room idx: 0
    Joel - Idx: 3 on room idx: 0
Room2 - Idx: 1
    Jaime - Idx: 0 on room idx: 1
    Sherwin - Idx: 1 on room idx: 1
    Gami - Idx: 2 on room idx: 1
    Beau - Idx: 3 on room idx: 1
Room3 - Idx: 2
    Roel - Idx: 0 on room idx: 2
    Edwin - Idx: 1 on room idx: 2
    Carl - Idx: 2 on room idx: 2
    Necho - Idx: 3 on room idx: 2

But i get this one here in my DEMO you can check the html structure there.

Upvotes: 2

Views: 1136

Answers (2)

Naghaveer R
Naghaveer R

Reputation: 2944

You can use

$parent.$index

Other simple solution is initiate index in ng-init with different variable

<div ng-app="app"  ng-controller="ctrl">
  <div ng-repeat="i in [1,2,3,4]" ng-init="firstIndex=$index">
    <div ng-repeat="i in [1,2,3,4]" ng-init="secondIndex=$index">
      <div ng-repeat="i in [1,2,3,4]" ng-init="thirdIndex=$index">
      {{firstIndex}}:{{secondIndex}}:{{thirdIndex}}
      </div>
    </div>
  </div>
</div>


var app=angular.module("app",[]);
app.controller("ctrl",function($scope){

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app"  ng-controller="ctrl">
  <div ng-repeat="i in [1,2,3,4]" ng-init="firstIndex=$index">
    <div ng-repeat="i in [1,2,3,4]" ng-init="secondIndex=$index">
      <div ng-repeat="i in [1,2,3,4]" ng-init="thirdIndex=$index">
      {{firstIndex}}:{{secondIndex}}:{{thirdIndex}}
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Giovani Vercauteren
Giovani Vercauteren

Reputation: 1908

You can use $parent to access to scope of the parent. So use

$parent.$index

Upvotes: 4

Related Questions