Having Trouble Repeating Correct Items With Nested Ng-repeat And Ng-if

I have the following html:

Solution 1:

You were almost there :)

What you need to do is this:

<divng-repeat="tab in tabs"ng-if="tabIsActive(tab, $index)"><ulng-repeat="section in tab.sections"ng-init="sectionIndex = $index"><h2ng-class="productTitle"ng-repeat="child in section.children"ng-if="sideTabIsActive(section, sectionIndex)"><imgng-src="{{ child.productImageURL }}"/><li>{{ child.title }}</li></ul></div>

This way, using the ng-init="sectionIndex = $index" you are saving the $index of the section and can use it on the nested ng-repeat. It's also possible to use $parent.$index but I wouldn't recommend it since the structure might change and you will be left with a bug.

This way, you can call ng-if="sideTabIsActive(section, sectionIndex)" using the index of the section, and only your active section's children will get to show.

Edit: you should probably change the signature of

$scope.sideTabIsActive = function (tab, $index)

to

$scope.sideTabIsActive = function ($index)

Since you're not actually using the tab in the function. (And if you do, don't forget to change the call to that function from the view as well)

Share

You may like these posts

• 
  Is Set A Hashed Collection In Javascript?
• 
  How To Get All Spans In String Variable, With Particular Class Name
• 
  Stop All Audio Inside Iframes From Parent
• 
  How To Add Div Tag In-between Two Paragraphs When Wrapped Inside Main Div Using Jquery