passing 2 $index values within nested ng-repeat

Passing 2 $index values within nested ng-repeat: A Simple Solution 🌟

👋 Hey there! Are you struggling with passing two $index values within a nested ng-repeat? Don't worry, you're not alone! This common issue arises when you need to pass both the $index from the outer ng-repeat and the $index from the inner ng-repeat to a function.

But fear not, my tech-savvy friend! 🤓 I've got some easy-to-implement solutions up my sleeve that will solve this problem in no time! Let's dive right in!

The Challenge 🎯

The code snippet you've shared describes a scenario where you have an ng-repeat nested inside another ng-repeat. The goal is to build a navigation menu where each menu item triggers a specific action when clicked. However, passing just one $index at a time isn't enough. You need to pass both the $index from the outer ng-repeat (which represents the section) and the $index from the inner ng-repeat (which represents the tutorial).

Solution 1: $parent.$index 👪

🤔 One quick and dirty solution is to use $parent.$index to access the outer ng-repeat's $index. By updating your ng-click expression, you can pass both $index values to your loadFromMenu() function.

Here's how you can modify your code snippet:

<ul ng-repeat="section in sections">
    <li class="section_title {{section.active}}">
        {{section.name}}
    </li>
    <ul>
        <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu($parent.$index, $index)" ng-repeat="tutorial in section.tutorials">
            {{tutorial.name}}
        </li>
    </ul>
</ul>

By using $parent.$index, you can access the outer ng-repeat's $index within the inner ng-repeat's loop. This way, you'll have both indices available in your loadFromMenu() function.

Solution 2: Object with Indices 📚

🌟 If you're a fan of cleaner code, you can consider using an object to hold both indices instead of directly passing them to the function. This approach adds more clarity to your code and makes it easier to understand what you're trying to achieve.

Here's an example of how you can implement this solution:

<ul ng-repeat="section in sections">
    <li class="section_title {{section.active}}">
        {{section.name}}
    </li>
    <ul>
        <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu({sectionIndex: $index, tutorialIndex: $parent.$index})" ng-repeat="tutorial in section.tutorials">
            {{tutorial.name}}
        </li>
    </ul>
</ul>

In this solution, we pass an object with two properties, sectionIndex and tutorialIndex, as an argument to the loadFromMenu() function. This approach keeps your code clean and makes it easier to understand the purpose of each index.

Mission Accomplished! 🎉

That's it! 👏 With either of these solutions, you can now pass both $index values within your nested ng-repeat loop. Say goodbye to the frustration of not having the right information at your fingertips!

Call-to-Action: Share Your Thoughts! 📝

I hope this guide has helped you overcome your ng-repeat challenge! If you have any questions, comments, or other cool solutions in mind, feel free to share your thoughts in the comments section below. Let's learn and grow together! 😄

Don't forget to share this helpful guide with your fellow developers who might be facing the same conundrum. Spread the knowledge and save them from the headaches of nested ng-repeats! 🌐

Happy coding! 💻