javascript - AngularJS ng-重复二维数组并根据索引仅显示某些值

Question

我有以下二维数组:

 SideNavItems= [["Parent Section 1", "Parent Section 2"],["Parent Section 3", "Parent Section 4"]]

我想使用 ng-repeat 在具有选项卡式导航的页面上按以下方式显示它们:

期望的输出:

选择第一个选项卡时:

Parent Section 1
Parent Section 2

选择第二个选项卡时:

Parent Section 3
Parent Section 4

当前输出:

选择第一个选项卡时:

Parent Section 1
Parent Section 2
Parent Section 3
Parent Section 4

我有一个 $index 变量，该变量根据选择的选项卡而变化。我可以设置它，以便当索引为0时仅重复第一个数组(二维数组的元素0)的内容，当索引为1时重复第二个数组(二维数组的元素1)的内容，依此类推，如果二维数组有更多元素？

这是我用于重复数组的 html:

            <div id="field">
                    <div ng-repeat="row in SideNavItems">
                        <div ng-repeat="cell in row" >                  
                                <a ng-click="level=2">{{cell}}</a>

                        </div>
                    </div>
            </div>

我不知道这是否非常相关，但这是选项卡的 HTML。 getClass 方法提供可更改 CSS 中选项卡外观的事件类。 toggleSelect 方法将当前索引更改为事件选项卡。

<nav>
    <ul>   
           <li ng-class="getClass($index)" ng-repeat="tab in tabs">
                <a ng-click="toggleSelect($index)" ng-class="getLinkClass($index)">{{tab}}</a>
           </li>
    </ul>
</nav>

我有类似的数组，其中每个父部分的子部分都相同，如果有办法完成这项工作，我希望做同样的事情。我想我需要另一个变量来充当第二个索引......

***编辑2015年2月3日下午2:00

根据您的建议，我能够得到我想要的输出。我现在正在尝试为这些父部分的子部分获得类似的功能，但它似乎有点复杂。我实际上有一个 3D 数组:

 [
   [[Parent1Child1, Parent1Child2],[Parent2Child1, Parent2Child2, Parent2Child3]],
   [[Parent3Child1, Parent3Child2],[Parent4Child1, Parent4Child2, Parent4Child3]]
 ]

期望的输出: 当选择第一个选项卡时:

Parent Section 1
  Parent1Child1
  Parent1Child2

Parent Section 2
  Parent2Child1
  Parent2Child2
  Parent2Child3

选择第二个选项卡时:

Parent Section 3
  Parent3Child1
  Parent3Child2

Parent Section 4
  Parent4Child1
  Parent4Child2
  Parent4Child3

每个部分最终都将是一个可折叠/可展开的 Accordion ，这就是我开始编码的目标，但也许我需要备份并处理它，吐出上面显示的所需输入，然后我可以使用 ng-click 显示/隐藏展开/折叠功能的正确内容。他就是我迄今为止所拥有的，而且似乎很接近。我描述了代码后的输出。

切换选择代码:

 //gets tab tiles order from csv
    $scope.tabs= tabsService.mainTabs;  

    //Assigns active classes to main tabbed navigation
    $scope.selectedIndex = 0;
    $scope.sideNavItems = productCategoryService.sideNavItems;
    $scope.sideNavChildren = productCategoryService.sideNavChildren;
    $scope.toggleSelect = function(ind){
            $scope.selectedIndex = ind;

            $scope.currentTabSideNavItems = $scope.sideNavItems[ind];

            $scope.selectedChildIndex = 0;
            $scope.toggleChildIndex = function(childIndex){
            $scope.selectedChildIndex = childIndex;

             $scope.currentSideNavChildren = $scope.sideNavChildren[ind][childIndex];
            }
    }

HTML

 <div id="field">
                <div ng-repeat="item in currentTabSideNavItems">
                    <a ng-click="toggleChildIndex($index)">{{item}}</a>
                        <div ng-repeat="child in currentSideNavChildren">
                            <a ng-click="toggleChildIndex($index)">{{child}}</a>
                        </div>
                </div>
  </div>     

使用此代码，当我单击相应的父部分标题时，我会显示正确的子部分，但子部分显示在当前页面上的所有父部分下。例如:

当选择第一个选项卡并单击父部分 1 时:

Parent Section 1
  Parent1Child1
  Parent1Child2

Parent Section 2
  Parent1Child1
  Parent1Child2

当选择第一个选项卡并单击父部分 2 时:

Parent Section 1
  Parent2Child1
  Parent2Child2
  Parent2Child3

Parent Section 2
  Parent2Child1
  Parent2Child2
  Parent2Child3

我是不是又把事情复杂化了？我该如何努力让合适的 child 与他们的 parent 在一起？非常感谢您抽出宝贵的时间，非常感谢。

Answer 1

在我看来，您确实希望将其保留在 UI 之外并将其隐藏在 Controller 中。从外观上看，您的 Controller 中已经有一个名为“toggleSelect”的操作，在其中您可以将新的范围属性设置为仅当前选定选项卡的侧面导航项，例如；

$scope.toggleSelect = function(index) {
  // existing code here

  $scope.currentTabSideNavItems = SideNavItems[index];
}

您的标记可以简化为:

<div id="field">
    <div ng-repeat="item in currentTabSideNavItems">
        <a ng-click="level=2">{{item}}</a>
    </div>
</div>

这样，提取要显示的项目的逻辑就可以很好地隐藏在 Controller 中，并且可以进行测试。