AngularJS ng-repeat 2D 数组并仅显示基于索引的某些值

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>

对于每个父节，我都有与子节相似的数组，如果有办法让这个工作，我希望做同样的事情。我想我需要另一个变量来充当第二个索引...

***编辑 2/3/15 下午 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

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

Answer 1

在我看来，您确实希望将其保留在 UI 之外并将其隐藏在控制器中。从外观上看，您的控制器中已经有一个名为 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>

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

Answer 2

正如@DoctorMick 所说，最好“从视图中分离逻辑”我做了一个snippet on jsfiddle with your needs，希望这会有所帮助。

<section ng-app="App" ng-controller="Ctrl">
    <nav>
        <ul>
            <li ng-repeat="tab in tabs" ng-click="updateSideNavItems($index)" ng-class="{active: $index === currentIndex}"> <a>{{tab}}</a>

            </li>
        </ul>
    </nav>
    <div id="field">
        <div ng-repeat="cell in SideNavItems">
          {{cell}}    
        </div>
    </div>
</section>

var app = angular.module('App', []);

app.controller('Ctrl', function ($scope) {
    var SideNavItems = [
        ["Parent Section 1", "Parent Section 2"],
        ["Parent Section 3", "Parent Section 4"]
    ];
    $scope.tabs = ['tab1', 'tab2', 'tab3'];

    $scope.updateSideNavItems = function updateSideNavItems(index) {
        $scope.currentIndex = index;
        if (index === 0) $scope.SideNavItems = SideNavItems[0];
        else if (index === 1) $scope.SideNavItems = SideNavItems[1];
        else $scope.SideNavItems = [].concat.apply([], SideNavItems);
    }

    // defaults
    $scope.currentIndex = 0;
    $scope.updateSideNavItems($scope.currentIndex);
});