Javascript AngularJS 中的子菜单（展开/折叠树）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26571175/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sub menu (expanded/collapsed tree) in AngularJS
提问by Bent
I have for the past day got stuck on finding the best way to use angular to control a menu list with sub-menus.
在过去的一天里，我一直在寻找使用 angular 来控制带有子菜单的菜单列表的最佳方法。
With jQuery you can just listen after a click event on a specific type of element like a <li>and add a class to its child element for a menu to open.
使用 jQuery，您可以在特定类型元素（如 a）上的单击事件之后进行侦听<li>，并将类添加到其子元素以打开菜单。
I'm trying to do the same thing like the menu on this page http://geedmo.com/themeforest/wintermin/dashboard.html, with Angular. But can't find the correct way by using my own directive or existing ones like ng-hide and ng-show.
我正在尝试使用 Angular 执行与此页面http://geedmo.com/themeforest/wintermin/dashboard.html上的菜单相同的操作。但是无法通过使用我自己的指令或现有指令（如 ng-hide 和 ng-show）找到正确的方法。
If anyone have an example og guides on how to do this the best way, my day would be saved. :)
如果有人有一个关于如何以最佳方式做到这一点的示例 og 指南，我的一天将被拯救。:)
I'm also new to angular so learning new thing every day.
我也是 angular 的新手，所以每天都在学习新东西。
回答by Artyom Pranovich
You can use the following code to create expanded/collapsed submenu on AngularJS.
您可以使用以下代码在 AngularJS 上创建展开/折叠子菜单。
I've attached JSFiddleexample for you.
我已经为您附上了JSFiddle示例。
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in items" ng-click="showChilds(item)">
<span>{{item.name}}</span>
<ul>
<li ng-repeat="subItem in item.subItems" ng-show="item.active">
<span>---{{subItem.name}}</span>
</li>
</ul>
</li>
</ul>
</div>
Your JS controller:
您的 JS 控制器：
function MyCtrl($scope) {
$scope.showChilds = function(item){
item.active = !item.active;
};
$scope.items = [
{
name: "Item1",
subItems: [
{name: "SubItem1"},
{name: "SubItem2"}
]
},
{
name: "Item2",
subItems: [
{name: "SubItem3"},
{name: "SubItem4"},
{name: "SubItem5"}
]
},
{
name: "Item3",
subItems: [
{name: "SubItem6"}
]
}
];
};
UPDATE:
更新：
I've updated my post due to your comment about, that when we click on the new menu's item, the previous should be collapsed.
由于你的评论，我更新了我的帖子，当我们点击新菜单的项目时，前一个应该被折叠。
Small changes in the code.
代码中的小改动。
New JSFiddlewith your need.
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in items" ng-click="showChilds($index)">
<span>{{item.name}}</span>
<ul>
<li ng-repeat="subItem in item.subItems" ng-show="item.active">
<span>---{{subItem.name}}</span>
</li>
</ul>
</li>
</ul>
</div>
You JS controller:
你 JS 控制器：
function MyCtrl($scope) {
$scope.showChilds = function(index){
$scope.items[index].active = !$scope.items[index].active;
collapseAnother(index);
};
var collapseAnother = function(index){
for(var i=0; i<$scope.items.length; i++){
if(i!=index){
$scope.items[i].active = false;
}
}
};
$scope.items = [
// items array the same with the previous example
];
};
