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

问题描述

过去一天我一直在寻找使用 angular 控制带有子菜单的菜单列表的最佳方法.

使用 jQuery，您可以在特定类型元素(例如

)上的单击事件之后进行侦听，并向其子元素添加一个类以打开菜单.

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

如果有人有一个关于如何以最佳方式做到这一点的示例 og 指南，我的一天就会被挽救.:)

我也是 angular 的新手，所以每天都在学习新东西.

解决方案

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

我已经为您附上了 JSFiddle 示例.

<ul><li ng-repeat="item in items" ng-click="showChilds(item)"><span>{{item.name}}</span><ul><li ng-repeat="item.subItems中的subItem" ng-show="item.active"><span>---{{subItem.name}}</span>

您的 JS 控制器:

function MyCtrl($scope) {$scope.showChilds = function(item){item.active = !item.active;};$scope.items = [{名称:项目1"，子项目: [{名称:SubItem1"}，{名称:SubItem2"}]},{名称:项目2"，子项目: [{名称:SubItem3"}，{名称:SubItem4"}，{名称:SubItem5"}]},{名称:项目3"，子项目: [{名称:SubItem6"}]}];};

更新:

由于您的评论，我更新了我的帖子，当我们点击新菜单的项目时，前一个应该折叠.

代码中的小改动.

新 JSFiddle 满足您的需求.

<ul><li ng-repeat="item in items" ng-click="showChilds($index)"><span>{{item.name}}</span><ul><li ng-repeat="item.subItems中的subItem" ng-show="item.active"><span>---{{subItem.name}}</span>

你的 JS 控制器:

function MyCtrl($scope) {$scope.showChilds = 函数(索引){$scope.items[index].active = !$scope.items[index].active;崩溃另一个(索引)；};var collapseAnother = 函数(索引){for(var i=0; i<$scope.items.length; i++){如果(我！=索引){$scope.items[i].active = false;}}};$scope.items = [//items 数组与前面的例子相同];};

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

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.

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.

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.

解决方案

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

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>

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

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

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

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