遇到问题重复使用嵌套纳克重复和NG-如果正确的项目 [英] Having trouble repeating correct items with nested ng-repeat and ng-if

问题描述

我有以下的html：

 ＆LT; D​​IV NG重复=标签在标签中NG-IF =tabIsActive（制表，$指数）＆GT;                  ＆LT; UL NG重复=，在tab.sections节＆GT;                     ＆LT; H2纳克级=productTitleNG重复=孩子section.childrenNG-IF =sideTabIsActive（部分，$指数）＆GT;
                        ＆LT; IMG NG-SRC ={{child.productImageURL}}/＆GT;
                        ＆LT;立GT; {{child.title}}＆LT; /李＆GT;
                  ＆LT; / UL＆GT;
             ＆LT; / DIV＆GT;
 

这是什么标签的JavaScript对象如下：

我所需的输出是子类的标题（例如children0.title）和图像（例如children0.productImageURL）每个部分上市时部分被​​选中。

例所需的输出：

在分析天平点击

 （ML图片）//这是section0.child0.productImageURL
 ML //这是section0.child0.title （XS图片）//这是section0.children1.productImageURL
 XS //这是section0.child1ren.title
 

目前，我显示此：

当点击分析天平：

 （ML图片）//这是section0.children0.productImageURL
 ML //这是section0.children0.title （XPE图片）//这是section1.children0.productImageURL
 XPE //这是section1.children0.title
 

如何列出每个部分两个孩子（和相关图片）在此基础上部分被选中（selectedSideIndex）？

在除了上述的HTML，这里是有关HTML和JavaScript的，我在我试图达到所需的输出使用：

  $ scope.toggleSideSelect =功能（IND）{
            $ scope.selectedSideIndex = IND;    }
$ scope.sideTabIsActive =功能（标签，$指数）{
            VAR selectedIndexTest = $ scope.selectedSideIndex
            返回$指数== $ scope.selectedSideIndex;
 

}

 ＆LT; D​​IV NG重复=标签在标签中NG-IF =tabIsActive（制表，$指数）＆GT;                  ＆LT; UL NG重复=部分tab.sectionsNG点击=toggleSideSelect（$指数）＆GT;
                     ＆LT;立GT; {{section.title}}＆LT; /李＆GT;
                     ＆LT; UL NG重复=孩子section.children＆GT;
                        ＆LT;立GT; {{child.title}}＆LT; /李＆GT;
                     ＆LT; / UL＆GT;
                  ＆LT; / UL＆GT;
             ＆LT; / DIV＆GT;
 

解决方案

您几乎有：）

您需要做的是这样的：

 ＆LT; D​​IV NG重复=标签在标签中NG-IF =tabIsActive（制表，$指数）＆GT;        ＆LT; NG-的init =sectionIndex = $指数＆GT UL纳克重复=，在tab.sections节;            ＆LT; H2纳克级=productTitleNG重复=孩子section.childrenNG-IF =sideTabIsActive（部分，sectionIndex）＆GT;
              ＆LT; IMG NG-SRC ={{child.productImageURL}}/＆GT;
              ＆LT;立GT; {{child.title}}＆LT; /李＆GT;
       ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

这样一来，使用 NG-的init =sectionIndex = $指数要保存的 $指数该节，可以使用它在嵌套的 NG-重复。它也可以使用 $父。$指数，但我不会推荐它，因为结构可能会发生变化，你将留下一个错误。

这样，你可以叫 NG-IF =sideTabIsActive（部分，sectionIndex）使用段的指数，只有你主动段的孩子将得到节目。

编辑：你或许应该改变的签名

$ scope.sideTabIsActive =功能（标签，$指数）

到

$ scope.sideTabIsActive =功能（$指数）

既然你不实际使用设置页中的作用。 （如果你做什么，不要忘记调用从视图改变为功能以及）

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-如果正确的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！