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.
