如何在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遞歸是通過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>

將此示例調整為您的用例，它將起作用。