在AngularJS子菜单（展开/折叠树） [英] Sub menu (expanded/collapsed tree) in AngularJS

问题描述

我已经在过去的一天就死在寻找使用角度来控制子菜单菜单列表中的最佳途径。

I have for the past day got stuck on finding the best way to use angular to control a menu list with sub-menus.

使用jQuery的你可以听上就像一个特定类型元素的click事件后＆LT;李＆GT; ，并添加一个类到其子元素添加到菜单打开。

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.

我试图做同样的事情像这个网页。的http：// geedmo .COM / themeforest /冬眠灵/ dashboard.html ，具有角。但无法找到用我自己的指令或现有的像NG-隐藏和NG-显示的正确方法。

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.

如果任何人有一个例子OG如何做这最好的办法导游，我一天会被保存。 ：）

If anyone have an example og guides on how to do this the best way, my day would be saved. :)

我也有新的角度所以每天学习新的东西。

I'm also new to angular so learning new thing every day.

推荐答案

您可以使用以下code创建扩展了AngularJS /折叠子菜单。

You can use the following code to create expanded/collapsed submenu on AngularJS.

我已经附加 的jsfiddle 例如你。

I've attached JSFiddle example for you.

<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控制器：

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

更新：

我已经更新我的岗位，由于您一下，当我们点击新菜单的项目中，previous应折叠评论。

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.

小的变化在code。

新的 的jsfiddle 与您的需要。

New JSFiddle with 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>

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

这篇关于在AngularJS子菜单（展开/折叠树）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！