AngularJS ng-重复2D数组，并根据索引仅显示某些值

我有以下二维数组：

 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 时仅重复第一个数组（2D 数组的元素 0）的内容，当索引为 1 时重复第二个数组（2D 数组的元素 1）的内容，依此类推如果 2D 数组有更多元素？

这是我用于重复数组的 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 中的选项卡外观。方法将当前索引更改为活动选项卡。

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

对于每个父部分，我都有类似的数组，如果有办法做到这一点，我希望做同样的事情。我想我需要另一个变量来充当第二个索引......

编辑 15-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

每个部分最终都将是一个可折叠/可扩展的手风琴，这就是我开始编码的目标，但也许我需要备份并处理它，吐出上面显示的所需输入，然后我可以使用 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

我是不是又把事情复杂化了？我该如何努力让合适的孩子和他们的父母在一起？非常感谢您的时间，非常感谢。