Let me start by saying I am very much in the beginning stages of learning to use Angular. I've done multiple searches, and seen multiple examples of setting up a menu with sub menus, but have found none for me to look at that have sub menus within sub menus.
I'm also, as you may have noticed, not very good at writing a question either. Let me continue with the code and a fiddle for an example. Hopefully someone can explain why this isn't working and where my logic has gone awry.
JavaScript
var App = angular.module("rcfdto",[]);
App.controller("menuController", ['$scope', function($scope){
$scope.locs = [
{
name: "Menu Option #1",
link: "#OP1",
id: "Option1",
submenu: null
},
{
name: "Menu Option #2",
link: "#OP2",
id: "Option2",
submenu: [
{
name: "Submenu Option 1",
link: "#SOP1",
id: "SubOption1",
subsubmenu: null
},
{
name: "Submenu Option 2",
link: "#SOP2",
id: "SubOption2",
subsubmenu: null
},
{
name: "Submenu Option 3",
link: "#SOP3",
id: "SubmenuOption3",
subsubmenu: [
{
name: "SubSubMenu Option 1",
link: "#SSOP1",
id: "SubSubmenuOption1"
},
{
name: "SubSubMenu Option 2",
link: "#SSOP2",
id: "SubSubmenuOption2"
}
]
}
]
},
{
name: "Menu Option #3",
link: "#OP3",
id: "Option3",
submenu: [
{
name: "Submenu Option 4",
link: "#SOP4",
id: "SubmenuOption4",
subsubmenu: [
{
name: "SubSubMenu Option 3",
link: "#SSOP3",
id: "SubSubmenuOption3"
}
]
},
{
name: "Submenu Option 5",
link: "#SOP5",
id: "SubmenuOption5",
submenu: null
}
]
}
];
}]);
HTML
<body ng-app="rcfdto">
<div class="menu container" ng-controller="menuController">
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li ng-repeat="loc in locs" ng-class="{'dropdown-submenu' : loc.submenu && loc.submenu.length}">
<a href="{{loc.link}}" id="{{loc.id}}">{{loc.name}}</a>
<ul ng-if="loc.submenu && loc.submenu.length" class="dropdown-menu">
<li ng-repeat="subloc in loc.submenu">
<a href="{{subloc.link}}" id="{{subloc.id}}">{{subloc.name}}</a>
<ul ng-if="subloc.subsubmenu && subloc.subsubmenu.length" class="dropdown-menu">
<li ng-repeat="subsubloc in subloc.subsubmenu">
<a href="{{subsubloc.link}}" id="{{subsubloc.id}}">{{subsubloc.name}}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.menu {
position:relative;
}
.menu > .dropdown-menu {
position:static;
display:block;
}
