Having trouble repeating correct items with nested ng-repeat and ng-if

问题

I have the following html:

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

                  <ul ng-repeat="section in tab.sections">

                     <h2 ng-class="productTitle" ng-repeat="child in section.children" ng-if="sideTabIsActive(section, $index)">
                        <img ng-src="{{ child.productImageURL }}"/>
                        <li>{{ child.title }}</li>
                  </ul>
             </div>

This is what the "tabs" javascript object looks like:

My desired output is the subcategory titles(e.g. children0.title) and image(e.g. children0.productImageURL) listed for each section when that section is selected.

Example desired output:

When Analytical Balances is clicked

 (ML image) //which is section0.child0.productImageURL
 ML         //which is section0.child0.title

 (XS image) //which is section0.children1.productImageURL
 XS         //which is section0.child1ren.title

Currently, I display this:

When Analytical Balances is clicked:

 (ML image) //which is section0.children0.productImageURL
 ML         //which is section0.children0.title

 (XPE image) //which is section1.children0.productImageURL
 XPE         //which is section1.children0.title

How can I list both children (and the associated image) for each section based on which section is selected (selectedSideIndex)?

In addition to the above HTML, here is relevant HTML and javascript that I use in my attempt to achieve the desired output:

    $scope.toggleSideSelect = function(ind){
            $scope.selectedSideIndex = ind;

    }


$scope.sideTabIsActive = function (tab, $index) {
            var selectedIndexTest = $scope.selectedSideIndex
            return $index==$scope.selectedSideIndex;

}

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

                  <ul ng-repeat="section in tab.sections" ng-click="toggleSideSelect($index)">
                     <li>{{ section.title }}</li>
                     <ul  ng-repeat="child in section.children">
                        <li>{{ child.title }}</li>
                     </ul>
                  </ul>
             </div>

回答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)

$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)

来源：https://stackoverflow.com/questions/28418412/having-trouble-repeating-correct-items-with-nested-ng-repeat-and-ng-if

标签

javascript

angularjs

angularjs-ng-repeat