How can you retrieve the index of the outer repeater item within nested ng-repeaters in AngularJS?

Question

How can you retrieve the index of the outer repeater item within nested ng-repeaters in AngularJS?

If I have multiple ng-repeat loops nested within each other like in the following example:

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

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

<div>

How can I access the $index value from the outterobject loop inside the function(inneritem.key, $index) function that is inside the ng-click directive of the innerobject loop?

Update:

I ultimately decided to implement this approach, despite there being two other viable solutions mentioned in the comments below.

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

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

<div>

javascript angularjs indexing angularjs-ng-repeat

Answer 1

Answer №1

To access the scope of the parent element, you can utilize $parent.

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

Answer 2

To access the scope of the parent element, you can utilize $parent.

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

Answer 3

Answer №2

One effective method is to use ng-init properly:

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

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

<div>

By utilizing ng-init, the value of $index from the outer scope created by the outer ng-repeat directive can be accessed.

It's crucial to place ng-init correctly to retrieve values on the appropriate scope. This means that placing it beside the second ng-repeat would capture the index of that specific repeater rather than the outer one!

Remember that any expression defining outerIndex on a child scope won't affect the one on the parent scope. To prevent this, opt for an object property like outer.Index.

This method is resilient to code changes impacting $parent scopes, making it more reliable, especially when nested within directives like ng-repeat.

In addition, testing this approach is straightforward compared to using $parent.

The official Angular documentation for ng-init acknowledges this as "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.

Answer 4

One effective method is to use ng-init properly:

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

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

<div>

By utilizing ng-init, the value of $index from the outer scope created by the outer ng-repeat directive can be accessed.

It's crucial to place ng-init correctly to retrieve values on the appropriate scope. This means that placing it beside the second ng-repeat would capture the index of that specific repeater rather than the outer one!

Remember that any expression defining outerIndex on a child scope won't affect the one on the parent scope. To prevent this, opt for an object property like outer.Index.

This method is resilient to code changes impacting $parent scopes, making it more reliable, especially when nested within directives like ng-repeat.

In addition, testing this approach is straightforward compared to using $parent.

The official Angular documentation for ng-init acknowledges this as "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.

Answer 5

Answer №3

Another approach is to utilize ng-init and define it directly

<div ng-repeat="item in object">

    <div ng-init='index=$index' ng-repeat="nestedItem in nestedObject" ng-click="executeFunction(nestedItem.key, index)"></div>

<div>

Answer 6

Another approach is to utilize ng-init and define it directly

<div ng-repeat="item in object">

    <div ng-init='index=$index' ng-repeat="nestedItem in nestedObject" ng-click="executeFunction(nestedItem.key, index)"></div>

<div>

How can you retrieve the index of the outer repeater item within nested ng-repeaters in AngularJS?

Update:

Answer №1

Answer №2

Answer №3

Similar questions

Adjusting the font color when hovering over multiline text

How to Insert <ul></ul> After Every Other <li> Element Using Angular's ngRepeat

Interactive image sliders in a Netflix-inspired style with live previews on hover, fully compatible with Bootstrap framework

How to verify the parent nodes in a jstree

effectively showcasing information in a datatable by converting JSON data into objects

What is the best method for updating the state of a dynamically created Switch component using React's setState()?

The application suddenly displays a blank white screen after encapsulating my layout with a context provider

Using $state outside of the AngularJS environment

Unable to retrieve innerHTML from a jQuery element

Create PDFs using PhantomJS when the HTML content is fully loaded and ready

State properties in Vuex remain unchangeable despite using mutator methods

Toggle class on child element when parent is clicked

The client side script "/socket.io/socket.io.js" was not located, therefore the Express-generator project was used instead

JavaScript opacity adjustments not achieving desired outcome

How can you switch between CSS styles using JQuery?

Troubleshooting Display Issue with Nested Div Selection in jQuery Tooltips

Obtain non-numeric parameters from the URL in Angular 2 by subscribing to

Vue appears to be having trouble waiting for the axios Post request

Conceal a list of items within a div that has a particular class

Issue: AngularJS Injector Module Error