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?
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>
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.
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...
***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:
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:
//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>
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:
When first tab is selected and I click on Parent Section 1:
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.
解决方案
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;
