Generating N level tree menu using ng-repeat in angularjs

Question

I have a json like this:

  $scope.Menu = [
    { "MenuID": "1", "MenuTitle": "Scan", "MenuUrl": "/Test/Test", "MenuParentID": "0" },
    { "MenuID": "2", "MenuTitle": "Security", "MenuUrl": "/Test/Test", "MenuParentID": "0" },
    { "MenuID": "3", "MenuTitle": "PDF", "MenuUrl": "/Test/Test", "MenuParentID": "1" },
    { "MenuID": "4", "MenuTitle": "Doc", "MenuUrl": "/Test/Test", "MenuParentID": "1" },
    { "MenuID": "5", "MenuTitle": "Creat User", "MenuUrl": "/Test/Test", "MenuParentID": "2" },
    { "MenuID": "5", "MenuTitle": "PDF SUB", "MenuUrl": "/Test/Test", "MenuParentID": "3" }
];

I want to generate a N level tree based on this json. I tried following:

<section class="sidebar" ng-repeat=" ParentMenu in Menu">


        <ul class="sidebar-menu" ng-if="ParentMenu.MenuParentID == 0">


            <li class="active treeview">
                <a href="#">
                    <i class="fa fa-dashboard"></i> <span>{{ParentMenu.MenuTitle}}</span> <i class="fa fa-angle-left pull-right"></i>
                </a>
                <ul ng-repeat="ChildMenu in Menu" class="treeview-menu">
                    <li ng-if="ChildMenu.MenuParentID==ParentMenu.MenuID">
                        <a href="index.html"><i class="fa fa-circle-o"></i> {{ChildMenu.MenuTitle}}</a>
                    </li>
                </ul>
            </li>

        </ul>
    </section>

Its working for 2 level. I'm new to angular. How can I achieve this?

This is how: http://stackoverflow.com/questions/18415142/how-to-handle-recursive-rendering-of-data-using-angularjs — dfsq, Nov 18 '15 at 07:27
The problem is its working for only two levels, Like I can have PDF under the Scan Menu as expected but can't get the PDF Sub under PDF menu. I want it to be a dynamic one. — Badhon Jain, Nov 18 '15 at 08:36

Generating N level tree menu using ng-repeat in angularjs

0 Answers0