Angularjs - in nested ng-repeaters, how do you get index of outher repeater item within nested repeater

Question

If I have nested ng-repeaters,, like this

<div ng-repeat="outeritem in outerobject">

    <div ng-repeat="inneritem in innerobject" ng-click="function(inneritem.key, $index)"></div>

<div>

How would I get the $index from outterobject repeater in function(inneritem.key, $index) which is in ng-click directive of innerobject repeater?

Update:

I ended up using this approach although there are two other good ones mentioned in below posts.

<div ng-repeat="(indexvalue, outeritem) in outerobject">

    <div ng-repeat="inneritem in innerobject" ng-click="function(inneritem.key, indexvalue)"></div>

<div>

score 3 · Accepted Answer · answered Mar 03 '14 at 06:03

3

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

ng-click="function(inneritem.key, $parent.$index)"

answered Mar 03 '14 at 06:03

AlwaysALearner

43,759
9
96
78

@ng-jslearningcurve Take a look here: http://stackoverflow.com/questions/14807258 and http://stackoverflow.com/questions/15256600 – AlwaysALearner Mar 03 '14 at 06:22
Awesome! Thanks! I ended up using '(indexVar, valueVar) in values' that was a few answers below in the post you pointed me to. That looks pretty good to me. – GRowing Mar 03 '14 at 06:26
Warning. Using `$parent` is not a good practice - it breaks the encapsulation, hard to test, your code is not stable under change - all sort of bad things. – Dmitri Zaitsev May 03 '15 at 12:04

score 2 · Answer 2 · answered May 03 '15 at 12:38

Using ng-init is the most robust method, if done right:

<div ng-repeat = "outerItem in outerObject" 
     ng-init = "outerIndex=$index">

    <div ng-repeat = "innerItem in innerObject" 
         ng-click = "expression($index, outerIndex)"></div>

<div>

Here ng-init grabs the value of $index on the outer scope created by the outer ng-repeat directive.

The same way you can use ng-init to grab any value on the correct scope. So the other answer putting ng-init next to the second ng-repeat would grab the index of that second repeater, not the outer one!

The usual scope inheritance caveaut applies - any other expression defining outerIndex on a child scope will not change the one of the parent scope. Use object property such as outer.Index instead, to avoid this effect.

This approach is also more robust as it will survive under code changes affecting $parent scopes, e.g. by wrapping the interior repeater into any directive affecting scope hierarchy (such as ng-repeat).

It is also easy to test (which e.g. any code using $parent isn't).

Note that Angular official documentation for ng-init considers this to be "the only appropriate use of it":

The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

score 0 · Answer 3 · answered Mar 03 '14 at 06:09

0

You can also use ng-init and set it explicitly

<div ng-repeat="outeritem in outerobject">

    <div ng-init='outerindex=$index' ng-repeat="inneritem in innerobject" ng-click="function(inneritem.key, outerindex)"></div>

<div>

answered Mar 03 '14 at 06:09

haki

9,389
15
62
110

Which would you think would be prudent to do? Use parent OR this method? – GRowing Mar 03 '14 at 06:19
I ended up using '(indexVar, valueVar) in values' that @CodeHater suggested. Thanks for helping out. – GRowing Mar 03 '14 at 06:27
This way `outerindex` becomes the inner index, not the outer! – Dmitri Zaitsev May 03 '15 at 12:06

Angularjs - in nested ng-repeaters, how do you get index of outher repeater item within nested repeater

Update:

3 Answers3