使用angularjs中的ng-repeat生成N级树菜单

Question

我有一个像这样的json：

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

我想基于这个json生成一个N级树。我试过以下：

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

它的2级工作。我是棱角分明的新手。我怎样才能做到这一点？