使用 Bootstrap 和 Angularjs 动态创建嵌套导航菜单项 [英] Dynamically creating nested navigation menu item using Bootstrap and 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 动态创建嵌套导航菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！