Question

我想要实现的是基于使用angularjs的json在bootstrap中动态创建菜单。

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

其中，对象键是页面的名称，对象值是物理文件位置。

角度app.js看起来像这样

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

其中菜单存储了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-repeat 旁边？
我应该更改 json约定以使其更容易吗？如果是这样，怎么样？

我是Angularjs和Bootstrap的新手。请温柔。

Answer 1

Object.keys（data）就像这样显示： [“Page A”，“Page B”，“Page C”]

再次循环：）

使用Bootstrap和Angularjs动态创建嵌套导航菜单项

1 个答案: