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

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

目前，我显示以下内容：

单击分析余额时：

 (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）列出每个节的子项（以及关联的图像）

除上述HTML外，以下是我在尝试实现所需输出时使用的相关HTML和javascript：

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

    }


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

}

{{section.title}}

{{child.title}

你就快到了：）

您需要做的是：

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

{{child.title}

这样，使用

ng init=“sectionIndex=$index”

可以保存节的

$index

，并可以在嵌套的

ng repeat

上使用它。也可以使用

$parent.$index

，但我不推荐使用，因为结构可能会改变，您将留下一个bug

这样，您可以使用节的索引调用

ng if=“sideTabIsActive（section，sectionIndex）”

，并且只有活动节的子项才能显示

编辑：您可能应该更改

$scope.sideTabIsActive=函数（选项卡，$index）

到

$scope.sideTabIsActive=函数（$index）

---

因为您实际上没有在函数中使用

选项卡

。（如果您这样做了，也不要忘记从视图中更改对该函数的调用）

JSON中全局对象的结构如何？@RichardCotrina它是从app.data文件夹中的文件动态创建的，因此我没有创建对象的javascript代码片段向您展示。我可以写一个，因为它很大，只需要一点时间。这是一张更好的chrome inspector中相关对象的照片：这有帮助吗？哦，那么我建议您更改数字生成数据的结构，以便在您需要使用的内容和需要显示的内容之间取得平衡。谢谢您，先生！到目前为止，您已经帮了我很多，但现在我正试图以类似的方式从对象中的数组中重复数据，我又在挣扎。我最近不耽误你的时间，非常感谢你的帮助。现在你已经知道这个项目了，我想我会把你和我的新问题联系起来：如果你有什么见解或者我不清楚，请告诉我。我保证我会先自己解决问题。这是我第一次使用AngularHi Omri，很抱歉打扰你一段时间了。但是这个应用程序正在使用这个动态创建的对象和

ng repeat

。然而，我在设置显示的初始数据时遇到了问题，我在这里发布了一个问题：如果以这种方式接触是不合适的，那么很抱歉。你们在stack上给了我比以前任何人都多的帮助，我想我会看看你们是否有时间。

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

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