Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Angularjs Ng Repeat / Javascript

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

Post a Comment
I have the following html:

    Solution 1:

    You were almost there :)

    What you need to do is this:

    <div ng-repeat="tab in tabs" ng-if="tabIsActive(tab, $index)">

        <ul ng-repeat="section in tab.sections" ng-init="sectionIndex = $index">

            <h2 ng-class="productTitle" ng-repeat="child in section.children" ng-if="sideTabIsActive(section, sectionIndex)">
              <img ng-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)


    You may like these posts

    Post a Comment for "Having Trouble Repeating Correct Items With Nested Ng-repeat And Ng-if"