Html Angular js 使用 json 创建动态菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30957338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular js create dynamic menu using json
提问by user2959949
I am new to angular js .I need to create a dynamic menu and hyperlink using angular js. I have menu name and hyperlink coming from json and i need to display. Currently i have tried with static menus which is working.
我是 angular js 的新手。我需要使用 angular js 创建一个动态菜单和超链接。我有来自 json 的菜单名称和超链接，我需要显示。目前我已经尝试过使用正在运行的静态菜单。
My menu structure is like
我的菜单结构就像
Home
Services
-ser1
-ser2
-ser3
About
-abt1
Contact
All the menu values and hyperlink comes from json file.
所有菜单值和超链接都来自 json 文件。
This is my json
这是我的json
[
{
"id": 100,
"product": 0,
"childs": [
{
"id": 200,
"description": {
"id": 0,
"name": "Home",
"url": "home"
}
}
]
},
{
"id": 100,
"description": {
"id": 0,
"name": "services",
"url": "services"
},
"parent": null,
"childs": [
{
"id": 200,
"description": {
"id": 0,
"name": "Ser1",
"url": "Ser1"
},
"productCount": 0,
"childs": [
{
"id": 250,
"description": {
"id": 0,
"name": "ser2",
"url": "Ser2"
},
"childs": []
},
{
"id": 251,
"description": {
"id": 0,
"name": "ser3",
"url": "ser3"
},
"productCount": 0,
"childs": []
}
]
}
]
},
{
"id": 201,
"description": {
"id": 0,
"name": "About",
"url": "about"
},
"productCount": 0,
"childs": [
{
"id": 203,
"description": {
"id": 0,
"name": "abt1",
"url": "underground"
},
"productCount": 0,
"childs": []
}
]
},
{
"id": 202,
"description": {
"id": 0,
"name": "Contact",
"url": "con"
},
"productCount": 0,
"childs": []
}
]
And this is my HTML
这是我的 HTML
<li class="prod-dropdown" ng-repeat="menu in menus" ng-class="{proddropdown: menu.menus}">
<a ng-href="#/{{menu.action}}" ng-class="{'dropdown-toggle': menu.menus}"
data-toggle="dropdown">{{menu.menus.desc['name']}} </a>
<ul ng-if="menu.menus" class="dropdown-menu">
<li ng-repeat="submenu in menu.menus">
<a ng-href="#/{{submenu.action}}">{{submenu.desc}}</a>
</li>
</ul>
</li>
采纳答案by user2959949
2 level submenu
2级子菜单
<li class="prod-dropdown" ng-repeat="menu in menus">
<a ng-href="#/{{menu.description['url']}}" ng-class="{'dropdown-toggle': menu.menus}" class="dropdown-toggle" data-toggle="dropdown">
{{menu.description['name'] | uppercase}} <span ng-if="menu.childs" class="caret"></span>
</a>
<ul ng-if="menu.childs" class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu" ng-repeat="submenu in menu.childs">
<a tabindex="-1" ng-href="#/products/{{submenu.description['url']}}">{{submenu
.description['name']}}</a>
<ul class="dropdown-menu" ng-if="submenu.childs">
<li class="dropdown-submenu" ng-repeat="subofsub in submenu.childs">
<a ng-href="#/products/{{subofsub.description['url']}}">{{subofsub.description['name']}}</a>
</li>
</ul>
</li>
</ul>
</li>
回答by Onur Gazio?lu
You should use ng-includeattribute - http://benfoster.io/blog/angularjs-recursive-templates
您应该使用ng-include属性 - http://benfoster.io/blog/angularjs-recursive-templates
回答by Jorge Casariego
Here is an example of "Dynamic multi level Menu"
这是“动态多级菜单”的示例
HTML
HTML
<ul class="sidebar-menu" 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>
Javascript
Javascript
$scope.showSubmenu = function(item) {
if ($scope.activeParentIndex === item) {
$scope.activeParentIndex = "";
} else {
$scope.activeParentIndex = item;
}
}
$scope.isShowing = function(index) {
if ($scope.activeParentIndex === index) {
return true;
} else {
return false;
}
};
$scope.modulos = [{
"module": "Admin System ",
"adm_modulo_id": 1,
"submodule": [{
"res": "Angular",
"url": "#/admin/1"
}, {
"res": "Linux",
"url": "#/admin/2"
}, {
"res": "Server",
"url": "#/admin/3"
}]
}];
and the result is here in a Plunk
结果在Plunk 中
回答by Andrey Ortiz
Review this page http://benfoster.io/blog/angularjs-recursive-templates, they made a multinivel menu since a json structure, no matter how many level do you have. And the example http://jsfiddle.net/NP7P5/1719/
查看此页面http://benfoster.io/blog/angularjs-recursive-templates，他们从 json 结构开始制作了一个 multinivel 菜单，无论您有多少级别。和示例http://jsfiddle.net/NP7P5/1719/
<div ng-app="app" ng-controller='AppCtrl'>
<script type="text/ng-template" id="categoryTree">
{{ category.title }}
<ul ng-if="category.categories">
<li ng-repeat="category in category.categories" ng-include="'categoryTree'">
</li>
</ul>
</script>
<ul>
<li ng-repeat="category in categories" ng-include="'categoryTree'"></li>
</ul>
</div>
var app = angular.module("app", []);
app.controller("AppCtrl", function ($scope) {
$scope.categories = [
{
title: "Computers",
categories: [
{
title: "Laptops",
categories: [
{
title: "Ultrabooks"
},
{
title: "Macbooks"
}
]
},
{
title: "Desktops"
},
{
title: "Tablets",
categories: [
{
title: "Apple"
},
{
title: "Android"
}
]
}
]
},
{
title: "Printers"
}
];
});
