![动态创建嵌套导航菜单项]( "动态创建嵌套导航菜单项")
本文介绍了使用 Bootstrap 和 Angularjs 动态创建嵌套导航菜单项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
限时删除！！
我想要实现的是使用angularjs基于json在bootstrap中动态创建菜单.
json 如下所示:
{"页面 A":"page_A.html",页面 B":{"页面 B1":"page_B/page_B1.html","页面 B2":"page_B/page_B2.html",页面 B3":{"页面 B3-a":"page_B/page_B3/page_a.html","页面 B3-b":"page_B/page_B3/page_b.html"}},"页面 C":"page_C.html"}其中对象键是页面名称，对象值是物理文件位置.
angular app.js 看起来像这样
app.controller('navCtrl', function($scope, $http) {$http.get('data/menu.json').success(function(data) {$scope.menus = 数据；});});
menus 存储 json 的位置
HTML bootstarp 看起来像这样(正在进行中，不起作用)
<div class="sidebar-nav navbar-collapse"><ul class="nav" id="side-menu"><li ng-repeat="(key,value) in menus"><a href="../{{value}}"><i class="dropdown-toggle" data-toggle="dropdown"></i>{{key}} </a>
我的问题:
- 如何基于 json 创建嵌套导航栏项目?
- 是否还有其他 Angularjs 指令可以在递归方面做得更好并且嵌套在 ng-repeat 旁边?
- 我是否应该更改我的 json 约定 以使其更容易?如果是这样，如何?
我是 Angularjs 和 Bootstrap 的新手.请温柔.
解决方案
Object.keys(data) 就这样显示:[页面A"、页面B"、页面C"]
再次循环:)
What I want to achieve is dynamically creating a menu in bootstrap based on a json using angularjs.
The json looks like this:
{
"Page A":"page_A.html",
"Page B":{
"Page B1":"page_B/page_B1.html",
"Page B2":"page_B/page_B2.html",
"Page B3":{
"Page B3-a":"page_B/page_B3/page_a.html",
"Page B3-b":"page_B/page_B3/page_b.html"
}
},
"Page C":"page_C.html"
}
where The object key is the name of the page and object value is the physical file location.
The angular app.js look like this
app.controller('navCtrl', function($scope, $http) {
$http.get('data/menu.json').success(function(data) {
$scope.menus = data;
});
});
where menus is stores the json
The HTML bootstarp look like this (Work in progress, doesn't work)
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li ng-repeat="(key,value) in menus">
<a href="../{{value}}"><i class="dropdown-toggle" data-toggle="dropdown"></i> {{key}} </a>
</li>
</ul>
</div>
</div>
My Question:
- How can I create nested navbar item based on the json?
- Is there any other Angularjs directive that can do better in terms of recursion and nested beside ng-repeat?
- Should I change my json convention to make it easier? If so, How?
I am new to both Angularjs and Bootstrap. Please be gentle.
解决方案
Object.keys(data) just show like this :["Page A", "Page B", "Page C"]
loop again :)
这篇关于使用 Bootstrap 和 Angularjs 动态创建嵌套导航菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
1403页，肝出来的..