Access index of the parent ng-repeat from child ng-repeat

👋 Hey there, tech lovers! Welcome to our blog, where we make the complicated seem easy! Today, we have a common issue that many developers stumble upon when working with nested ng-repeats. Let's dive right in and tackle it together! 🤓

The problem at hand is how to access the index of the parent ng-repeat from within the child ng-repeat. In the given context, the aim is to use the index of the parent list, foos, as an argument in a function call within the child list, foos.bars. Pretty tricky, right? 😅

The original suggestion was to use $parent.$index, but it seems that $index is not a property of $parent. So let's find a different approach to make it work!

To access the index of the parent ng-repeat, you can make use of a feature called $parent.$index in combination with an alias. Let's see how it works:

<div ng-repeat="f in foos">
  <div>
    <div ng-repeat="b in foos.bars as parentIndex"> <!-- an alias, let's call it parentIndex here! -->
      <a ng-click="addSomething(parentIndex)">(✨) Add Something</a>
    </div>
  </div>
</div>

In the example above, we introduced the alias parentIndex in the child ng-repeat declaration. By doing so, we create a new scope for the child ng-repeat, enabling us to access the parent index of foos.

Now, when we call the addSomething function with parentIndex as an argument, we are effectively passing the parent index to that function. 😎

And there you have it! A simple solution to a common problem! 🎉

But hey, it doesn't stop here! We'd love to hear from you! Join the conversation by leaving a comment and sharing your experiences with nested ng-repeats or any other Angular challenges you've encountered!

Also, don't forget to share this post with your fellow developers who might be struggling with the same issue. Together, we can make coding a breeze! 💪🔥

Happy coding! 👩‍💻👨‍💻