javascript - AngularJS 中的子菜单(展开/折叠树)

Question

在过去的一天里，我一直在寻找使用 Angular 来控制带有子菜单的菜单列表的最佳方法。

使用 jQuery，您可以在特定类型的元素(如 <li>)上的点击事件后监听并向其子元素添加一个类以打开菜单。

我正在尝试做与此页面上的菜单相同的事情 http://geedmo.com/themeforest/wintermin/dashboard.html , 与 Angular 。但是无法通过使用我自己的指令或现有指令(如 ng-hide 和 ng-show)找到正确的方法。

如果有人有关于如何以最佳方式执行此操作的示例 og 指南，我的日子就会得救。 :)

我也是 Angular 的新手，所以每天都在学习新事物。

Answer 1

您可以使用以下代码在 AngularJS 上创建展开/折叠的子菜单。

我附上了 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>

你的 JS Controller :

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"}
            ]
        }
    ];
};

更新:

由于您的评论，我已经更新了我的帖子，当我们点击新菜单项时，之前的菜单项应该被折叠。

代码中的小改动。

新JSFiddle满足您的需求。

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

你的 JS Controller :

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
    ];
};