How to generate multilevel menu items programmatically in angularjs?

Question

I am creating side menu bar which is generated programatically from json.

I have coded two level items but I hard coded two level ulLi items in html. But I don't want to hard coded the level of menu items.

I have tried the following code.

HTML

<ul class="sidebar-menu sidebar-nav" ng-repeat="m in modulos">
    <li class="treeview" ng-repeat="(itemIndex, item) in modulos">
        <a ng-click="showSubmenu(itemIndex)">
            <i class="fa fa-table"></i> <span>{{item.module}}</span>
        </a>

        <ul class="sub-nav" ng-show="isShowing(itemIndex)">
            <li ng-repeat="sub_element in m.submodule">
                <a href="{{sub_element.url}}">{{sub_element.res}}</a>
            </li>
        </ul>
    </li>
</ul>

js

$scope.modulos = [{
    "module":"Admin System ",
    "adm_modulo_id":1,
    "submodule": [{
        "res":"Angular","url":"#",
        "submodule":[{
            "res":"Angular",
            "url":"#/admin/1"
        },{
            "res":"Linux",
            "url":"#/admin/2"
        },{
            "res":"Server",
            "url":"#/admin/3"
        }]
    },{
        "res":"Linux",
        "url":"#/admin/2"
    },{ 
        "res":"Server",
        "url":"#/admin/3"
    }]

}];

Here I have coded two levels of items. But it is a variable. Some items will have 5 levels and another one will have 2 levels.

So based in submodule, I need to write a logic.

Bata · Accepted Answer · 2016-03-10 07:48:14Z

1

You do this with recursion like every other "tree" problem. Recursion in html with angular is done with the template in the html, example:

<script type="text/ng-template" id="list_node.html">
    ........
    <ul>
        <li ng-repeat="node in node.children" ng-include="list_node.html"></li>
    </ul>
</script>

On the place where the dots are in my snipper above, you will define what to show (what data on the node item). Example: <p>{{node.name}}</p>

And then in your ng-repeat you just include the template. Example:

<ul class="node-indented slide">
    <li ng-repeat="node in node.children" ng-include="'list_node.html'"></li>
</ul>

Adjust this example to your use case and it will work.

edited Mar 10, 2016 at 7:48

answered Mar 9, 2016 at 8:27

Bata

6513 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mohaideen Over a year ago

In have tried in following fiddle. but it doesn't work jsfiddle.net/MohaideenIsmail/42dx6r5m

Bata Over a year ago

here is your fiddle edited and working as a simple example: jsfiddle.net/n7peswvu

Bata Over a year ago

Also I would strongly suggest you search and read about the recursion. Browse some examples, it does not have to be JavaScript examples. Once you understand recursion concept, this will be much more clear.

Jens Over a year ago

Either github.com/dotJEM/angular-tree or directive recursion would be better/cleaner alternatives. The later being the best performer probably but requires you to write a directive.

Collectives™ on Stack Overflow

How to generate multilevel menu items programmatically in angularjs?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related