无法使用嵌套的 ng-repeat 和 ng-if 重复正确的项目 [英] Having trouble repeating correct items with nested ng-repeat and ng-if

问题描述

我有以下 html:

 
<ul ng-repeat="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>

这是选项卡"javascript 对象的样子:

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

示例所需的输出:

点击分析天平时

 (ML image)//这是section0.child0.productImageURLML//这是section0.child0.title(XS image)//这是section0.children1.productImageURLXS//这是section0.child1ren.title

目前，我显示这个:

当点击分析天平时:

 (ML image)//这是section0.children0.productImageURLML//这是section0.children0.title(XPE image)//这是section1.children0.productImageURLXPE//这是section1.children0.title

如何根据选择的部分 (selectedSideIndex) 列出每个部分的两个子项(以及相关图像)?

除了上面的 HTML 之外，这里还有相关的 HTML 和 javascript，我尝试使用它们来实现所需的输出:

 $scope.toggleSideSelect = function(ind){$scope.selectedSideIndex = ind;}$scope.sideTabIsActive = 函数(标签，$index){var selectedIndexTest = $scope.selectedSideIndex返回 $index==$scope.selectedSideIndex;

}

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

解决方案

你就快到了 :)

你需要做的是:

<ul ng-repeat="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>

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

这样，您可以使用该部分的索引调用 ng-if="sideTabIsActive(section, sectionIndex)"，并且只有您活动部分的子项才能显示.

您可能应该更改

的签名

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

到

$scope.sideTabIsActive = 函数($index)

因为您实际上并未在函数中使用 tab.(如果这样做，也不要忘记从视图中更改对该函数的调用)

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>

解决方案

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)

这篇关于无法使用嵌套的 ng-repeat 和 ng-if 重复正确的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！