AngularJS - How to get two indexes

Question

I am having two ng-repeat for child and parent divs as follows

<div ng-repeat="stage in stages">
  <div ng-repeat="step in steps">
    <button ng-click="clickedStageAndStep($index)">
  </div>
</div>

$scope.clickedStageAndStep = function(index) {
  console.log("Step Index: " + index)
};

I wanna get child and parent indexes. How can I fetch?

To access the index of the parent you have to go two steps up by writing `$parent.$parent.$index` See here: [ http://stackoverflow.com/questions/26875437/angularjs-access-to-first-of-ngrepeat-parent-in-a-nested-ngrepeat ] — Avantika Saini, May 23 '16 at 07:21
Possible duplicate of [passing 2 $index values within nested ng-repeat](http://stackoverflow.com/questions/15256600/passing-2-index-values-within-nested-ng-repeat) — James Brierley, May 23 '16 at 12:31

Rayon · Accepted Answer · 2016-05-23T07:33:16.730

8

Use $parent.$index

Each ng-repeat has its own scope and $index refers to innermost scope of ng-repeat

$scope.clickedStageAndStep = function(parent, child) {
  console.log("Step Index: " + child);
};

<div ng-repeat="stage in stages">
  <div ng-repeat="step in steps">
    <button ng-click="clickedStageAndStep($parent.$index,$index)"></button>
  </div>
</div>

Note: </button> tag is not closed.

edited May 23 '16 at 07:33

answered May 23 '16 at 07:19

Rayon

36,219
4
49
76

Amir Popovich · Answer 2 · 2016-05-23T07:25:15.890

Use $parent.$index

HTML:

<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="stage in stages">
    <div ng-repeat="step in stage.steps">
      <span>Index: {{$index}}. ParentIndex:{{$parent.$index}}</span>
    </div>
  </div>
</div>

JS:

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.stages = [{
    steps: ['1', '2', '3']
  }, {
    steps: ['4', '5']
  },
  {steps:['6','7','8']}];
})

JSFIDDLE.

Keshav · Answer 3 · 2016-05-23T07:27:33.773

3

Use $index and $parent.$index to get child and parent indexes.

 <div ng-repeat="stage in stages">
      <div ng-repeat="step in steps">
        <button ng-click="clickedStageAndStep($parent.$index,$index)">
      </div>
    </div>

    $scope.clickedStageAndStep = function(stageIndex,stepIndex) {
      console.log("Stage Index: " + stageIndex + "And Step Index: " + stepIndex);
    };

edited May 23 '16 at 07:27

answered May 23 '16 at 07:21

Keshav

821
2
12
33

score 3 · Answer 4 · answered May 23 '16 at 07:23

Define a variable that for parent index

    <div ng-repeat="stage in stages" ng-init="stageNumber = $index">
      <div ng-repeat="step in steps">
          <button ng-click="clickedStageAndStep($index, $parent.$index)" >YourButton </button>
      </div>
    </div>

    $scope.clickedStageAndStep = function(stageIndex,stepIndex) {
      console.log("Step Index: " + stepIndex + "And StageIndex: " + stageIndex)
    };

score 2 · Answer 5 · edited May 23 '16 at 07:20

2

Try

<div ng-init="parentIndex = $index"> </div>

edited May 23 '16 at 07:20

T J

42,762
13
83
138

answered May 23 '16 at 07:19

Janko

202
2
11

correct! but it's just doesn't answer the question and i guess you missed what OP is doing? – Jai May 23 '16 at 07:22
yeah, i admit i forgot about op. Too much coffee today push me to answer that question :) above answer is better – Janko May 23 '16 at 07:53

AngularJS - How to get two indexes

5 Answers5