javascript - 如何在angularjs中以编程方式生成多级菜单项？

Question

我正在创建侧菜单栏，它是从 json 以编程方式生成的。

我已经编码了两个级别的项目，但我在 html 中硬编码了两个级别的 ulLi 项目。但我不想对菜单项的级别进行硬编码。

我尝试过以下代码。

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

}];

这里我编码了两个级别的项目。但这是一个变量。有些项目有 5 个级别，另一些项目有 2 个级别。

因此基于子模块，我需要编写一个逻辑。

Answer 1

像其他所有“树”问题一样，您可以通过递归来完成此任务。 html 中的 Angular 递归是通过 html 中的模板完成的，例如:

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

在上面的截图中的点所在的位置，您将定义要显示的内容(节点项上的哪些数据)。示例:<p>{{node.name}}</p>

然后在您的 ng-repeat 中您只需包含模板即可。示例:

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

根据您的用例调整此示例，它将起作用。