无法使用嵌套的 ng-repeat 和 ng-if 重复正确的项目

Question

我有以下 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>

这就是 "tabs" javascript object 的样子：

我想要的输出是选择每个部分时列出的子类别标题（例如 children0.title）和图像（例如 children0.productImageURL）。

示例所需输出：

单击“分析天平”时

 (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

目前我显示的是：

单击“分析天平”时：

 (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

如何根据所选部分 (selectedSideIndex) 列出每个部分的 children（和相关图像）？

除了上述 HTML 之外，这里还有相关的 HTML 和 javascript，我在尝试实现所需的输出时使用：

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

Answer 1

你快到了:)

你需要做的是：

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

这样，使用 ng-init="sectionIndex = $index" 您可以保存该部分的 $index，并且可以在嵌套的 ng-repeat 上使用它。也可以使用 $parent.$index，但我不推荐它，因为结构可能会改变，你会留下一个错误。

这样，您可以使用版块的索引调用 ng-if="sideTabIsActive(section, sectionIndex)"，只有您的活动版块的子级才会显示。

编辑： 你应该更改

的签名

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

到

$scope.sideTabIsActive = function ($index)

因为您实际上并没有在函数中使用 tab。（如果这样做，也不要忘记从视图中更改对该函数的调用）

无法使用嵌套的 ng-repeat 和 ng-if 重复正确的项目

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

javascript

angularjs

angularjs-ng-repeat