AngularJS NG-重复二维数组，并根据指数只显示某些值 [英] AngularJS ng-repeat 2D array and display only certain values based on index
问题描述
我有以下两个维数组：
SideNavItems= [["Parent Section 1", "Parent Section 2"],["Parent Section 3", "Parent Section 4"]]
我想用NG-重复，以显示他们的网页，已经tab导航的方式如下：
I want to use ng-repeat to display them the following way on a page that has tabbed navigation:
所需的输出：
当选择了第一个选项卡：
When first tab is selected:
Parent Section 1
Parent Section 2
当选择了第二个选项卡：
When second tab is selected:
Parent Section 3
Parent Section 4
电流输出：
当选择了第一个选项卡：
When first tab is selected:
Parent Section 1
Parent Section 2
Parent Section 3
Parent Section 4
我有一个变化的基础上选定的内容选项卡$索引变量。我可以设置它，使得仅所述第一阵列（二维阵列的元素0）的内容被重复，当指数为0，第二个阵列（二维阵列的元件1）的内容时，该指数为1，重复等，如果2D阵列具有多个元素
I have a $index variable that changes based on what tab is selected. Can I set it so that only the contents of the first array(element 0 of the 2D array) are repeated when the index is 0, the contents of the second array(element 1 of the 2D array) are repeated when the index is 1, and so on if the 2D array had more elements?
下面是HTML我有重复的数组：
Here is the html I have for repeating the arrays:
<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方法改变当前指数活动选项卡。
and I don't know if this will be very relevant but here is the HTML for the tabs. The getClass methods giving active classes that change the tabs appearance in CSS. The toggleSelect method changes the current index to the active tab.
<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>
我有孩子的部分为每个父段相似矩阵，并希望做同样的事情，如果有一种方法，使这项工作。我想我会需要另一个变量作为第二个指标，但...
I have similar arrays with the child sections for each of these parent sections and hope to do the same thing if there is a way to make this work. I guess I would need another variable to act as a second index though...
***编辑15年2月3日下午2:00
***EDIT 2/3/15 2:00PM
使用你的建议，我能得到我想要的输出。我现在想获得类似的功能，这些父段的孩子，似乎有点复杂。其实我有一个三维数组：
Using your advice, I was able to get my desired output. I am now trying to get similar functionality for the children of these parent sections and it seems a bit more complicated. I actually have a 3D array:
[
[[Parent1Child1, Parent1Child2],[Parent2Child1, Parent2Child2, Parent2Child3]],
[[Parent3Child1, Parent3Child2],[Parent4Child1, Parent4Child2, Parent4Child3]]
]
所需的输出：
如果选择第一个选项卡：
Desired Output: When first tab is selected:
Parent Section 1
Parent1Child1
Parent1Child2
Parent Section 2
Parent2Child1
Parent2Child2
Parent2Child3
当选择了第二个选项卡：
When second tab is selected:
Parent Section 3
Parent3Child1
Parent3Child2
Parent Section 4
Parent4Child1
Parent4Child2
Parent4Child3
每个部分将最终成为一个可折叠的/可扩展的手风琴，这就是我开始对编码，但也许我需要备份并在其上吐出上面显示所需的输入工作，然后我就可以玩的NG-点击显示/隐藏的展开/折叠功能，正确的内容。他是我到目前为止，它似乎接近。我描述了code后的输出。
Each section will eventually be an collapsable/expandable accordion and that's what I started coding toward but maybe I need to back up and work on it spitting out the desired input shown above, and then I can play around with ng-click showing/hiding the correct content for the expand/collapse functionality. He is what I have so far and it seems to be close. I describe the output after the code.
toggleSelect code：
toggleSelect code:
//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>
有了这个code，我得到适当的孩子表现为我点击相应的父节头，但当前页面上的所有父段以下的儿童出现。例如：
With this code, I get the proper children appearing as I click on the corresponding Parent Section header, but the children appear under all the parent sections on the current page. For example:
在选择第一个选项卡，然后我点击父节1：
When first tab is selected and I click on Parent Section 1:
Parent Section 1
Parent1Child1
Parent1Child2
Parent Section 2
Parent1Child1
Parent1Child2
在选择第一个选项卡，然后我点击父第2部分：
When first tab is selected and I click on Parent Section 2:
Parent Section 1
Parent2Child1
Parent2Child2
Parent2Child3
Parent Section 2
Parent2Child1
Parent2Child2
Parent2Child3
难道我一遍又一遍的事情复杂化？我怎么可能对与他们的父母得到适当的儿童工作？谢谢你这么多的时间，它是非常AP preciated。
Am I over complicating things again? How might I work toward getting the proper children with their parents? Thank you so much for your time it is very appreciated.
推荐答案
在我看来，你真的想保持这一点的UI和隐藏它拿走控制器。你已经有一个名为toggleSelect在你的控制器通过对事物的形象做一个动作，里面可以设置一个新的作用域属性为只有当前所选选项卡的侧面导航项目，像;
In my opinion, you really want to keep this out of the UI and hide it away in the controller. You already have an action called toggleSelect in your controller by the looks of things, inside that you can set a new scope property to be only the side nav items of the currently selected tab, something like;
$scope.toggleSelect = function(index) {
// existing code here
$scope.currentTabSideNavItems = SideNavItems[index];
}
和您的标记可以简化为：
And your markup can be simplified to:
<div id="field">
<div ng-repeat="item in currentTabSideNavItems">
<a ng-click="level=2">{{item}}</a>
</div>
</div>
这种方式，用于提取出要显示在控制器很好地隐藏的项目的逻辑，并且可以被测试。
That way the logic for extracting out the items to be displayed is hidden nicely in your controller, and can be tested.
这篇关于AngularJS NG-重复二维数组，并根据指数只显示某些值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
