[英]How to generate multilevel menu items programmatically in angularjs?
I am creating side menu bar which is generated programatically from json. 我正在创建从json以编程方式生成的侧边菜单栏。
I have coded two level items but I hard coded two level ulLi items in html. 我已经编码了两个级别的项目,但是我用html硬编码了两个级别的ulLi项目。 But I don't want to hard coded the level of menu items.
但是我不想对菜单项的级别进行硬编码。
I have tried the following code. 我尝试了以下代码。
HTML 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 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.
一些项目将具有5个级别,而另一个项目将具有2个级别。
So based in submodule, I need to write a logic. 因此,基于子模块,我需要编写一个逻辑。
You do this with recursion like every other "tree" problem. 您可以像其他所有“树”问题一样,通过递归进行此操作。 Recursion in html with angular is done with the template in the html, example:
带有角度的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>
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>
示例:
<p>{{node.name}}</p>
And then in your ng-repeat you just include the template. 然后在ng-repeat中仅包含模板。 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. 将此示例调整为您的用例,它将起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.