Adding a sub-menu in my HTML with AngularJS? - angularjs

Question

I have an application created with AngularJS which has a strip of menus. What I am trying to do is to create submenus with each menu. The submenus can be created by adding additional <ul> <li> ... </li> </ul> under my existing list items of menus. How can I do it?
This is my code with AngularJS calls:
<div id="menu">
<ul>
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
{{page.menuTitle}} {{page.subMenu}}
</li>
</ul>
</div>
This generates the following code in HTML with div of id=menu:
<ul>
<li class="ng-scope ng-binding selected" ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
<a class="ng-binding" href="" ng-click="goToPage($index)">Introduction</a>
</li>
<li class="ng-scope ng-binding" ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
<a class="ng-binding" href="" ng-click="goToPage($index)">Cases</a>
</li>
...
...
</ul>
AngularJS JS code
The Angular JS Code to compliment above HTML is:
data.title = 'Amanpour consult Petrochemicals & Energy';
data.pages = [];
data.pages[0] = {};
data.pages[0].menuTitle = 'Introduction';
data.pages[0].slides = [];
data.pages[0].slides[0] = {heading:'A Heading: profile', speaker: 'The man himself', title:'Expert in awesomeness', img:'showing-awesomeness.jpg', video:'witnessing-awesomeness.m4v'};
....
data.pages[0].slides[1]
....
data.pages[0].slides[2]
....
data.pages[0].slides[3]
Now to add the submenu, I thought may be I could following to AngularJS code:
data.pages[0].subMenu = '<ul> <li> First Link </li> <li> Second Link </li> </ul>';
and then call it in HTML like this (notice the {{page.subMenu}}):
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
{{page.menuTitle}} **{{page.subMenu}}**
</li>
But it doesn't work, all it gives me is the following, which just prints the HTML literally on the page:
<ul> <li> <a href="#">First Link</a> </li> <li> <a href="#">Second Link</a> </li> </ul>
Update
I'd have to create a menu within JS like this:
data.subMenu = [];
data.subMenu[0] = {};
data.subMenu[0].list = [];
data.subMenu[0].list[0] = 'Menu 1';
data.subMenu[0].list[1] = 'Menu 2';
data.subMenu[0].list[2] = 'Menu 3';
and would have to call it in my HTML like this:
<div id="menu">
<ul>
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
{{page.menuTitle}}
<ul>
<li ng-repeat="smenu in data.subMenu">
{{smenu.list[smenu]}}
</li>
</ul>
</li>
</ul>
</div>
The only problem is that I'd have to do the looping right; I am not able to make the index within the loop correctly.

Answer 1

I'm not quite sure if this is what you were looking for but take a look at this jsfiddle : http://jsfiddle.net/Marabyte/dxBe8/
In the HTML you have the structure for two nav, the main nav, the sub nav and respective ul/li
<section ng-app ng-controller="navCtrl">
<nav class="main">
<ul class="ul-nav">
<li class="li-nav li-main" ng-click="select($index)" ng-repeat="list in lists">{{list.name}}</li>
</ul>
</nav>
<nav class="sub" ng-show="subMenuShow">
<ul class="ul-nav ul-sec">
<li class="li-nav li-main" ng-repeat="sublist in sublists">{{sublist}}</li>
</ul>
</nav>
</section>
In your controller you have 2 lists for the main and sub nav.
function navCtrl($scope) {
$scope.lists = [{
name: "Cinema"
}, {
name: "TV Shows"
}, {
name: "Music"
}, {
name: "Awards"
}];
$scope.subMenu = [
["Snatch", "Rockrolla"],
["Sherlock", "Game of Thrones"],
["The National", "Johnny Cash", "Xutos & Pontapés"],
["Oscars", "Golden Globes", "Emmys", "BAFTA"]
];
$scope.select = function ($index) {
$scope.sublists = $scope.subMenu[$index];
$scope.subMenuShow = true;
};
}
The select() function is showing the subMenu based on the index of the main list.
Hope it helps!
Hugo