动态地创建使用引导和Angularjs嵌套的导航菜单项 [英] Dynamically creating nested navigation menu item using Bootstrap and Angularjs

问题描述

我要实现的是动态创建的引导菜单基于使用angularjs一个JSON什么。

What I want to achieve is dynamically creating a menu in bootstrap based on a json using angularjs.

JSON的是这样的：

 {
    "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.

角app.js这个样子

app.controller('navCtrl', function($scope, $http) {
    $http.get('data/menu.json').success(function(data) {
        $scope.menus   = data;
    });
});

在这里的菜单是存储的JSON

where menus is stores the json

的HTML bootstarp这个样子（进展中的工作，不工作）

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

我的问题：

• 如何创建嵌套基于JSON的导航栏项目？


• 是否有任何其他的 Angularjs指令能在递归方面做的更好，旁边嵌套的 NG-重复？


• 我应该改变我的 JSON约定，以使其更容易？如果是这样，怎么样？

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

我是新来的都Angularjs和引导。请温柔。

I am new to both Angularjs and Bootstrap. Please be gentle.

推荐答案

Object.keys（数据）只显示是这样的：
[页面A，网页B，C页]

Object.keys(data) just show like this : ["Page A", "Page B", "Page C"]

循环再次：）

这篇关于动态地创建使用引导和Angularjs嵌套的导航菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！