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

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

• javascript
• html
• angularjs
• angularjs-directive
• angular-ui

Share Follow edited Oct 29, 2014 at 18:05 Artyom Pranovich 6,96288 gold badges4343 silver badges6060 bronze badges asked Oct 26, 2014 at 8:27 BentBent 6311 gold badge11 silver badge55 bronze badges 1

• Hi Artyom, i'm trying to have my menulist with sub menus functioning as the menu on the site I referred to. When you click one menu link the list under it expands, if you click on a new element the old submenu closes and the new sub-menu expands. =) – Bent Commented Oct 26, 2014 at 9:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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