Leftside multilevel menu with Ionic, angularjs, bootstrap 3 didnt work properly

Question

i need this

this is the controller code:

$scope.sideNavMenu =
{
    title: "User Manual",
    subMenu: [
    {
        title: "Title one",
        link: "index/titleone.html",
        icon:"fa fa-caret-down",
        subMenu: []
    },
    {
        title: "Basic",
        link: "index/basic/basic.html",
        icon:"fa fa-caret-down",
        subMenu: [
        {
            title: "Basic Function",
            link: "index/basic/function.html",
            icon:"fa fa-caret-down",
            subMenu: []
        }]  
    }]
};

i have been two weeks trying to solve. please any can help me?

this is as far as it went

<div id="MainMenu">
    <div class="list-group panel">
        <a href="#mainMenuContainer" class="list-group-item list-group-item-success strong" data-toggle="collapse" data-parent="#MainMenu">
        <i class="fa fa-home"></i>
        {{sideNavMenu.title}}
        <i class="fa fa-caret-down"></i>
        </a>
    <div ng-include ng-if="sideNavMenu.subMenu.length > 0" ng-repeat="navMenu in sideNavMenu.subMenu" onload="data = navMenu"  src="'menuTemplate.html'"class="collapse" id="mainMenuContainer">
    </div>
</div>

template

<script id="menuTemplate.html" type="text/ng-template">

    <a ng-href="#{{ (data.subMenu.length > 0) && data.link || ''}}" class="list-group-item {{(data.subMenu.length > 0) && 'strong' || ''}}" data-toggle="collapse"  data-parent="{{data.link}}">{{data.title}}<i class="fa fa-caret-down"></i></a>

    <div ng-include ng-repeat="navMenu in data.subMenu" onload="data = navMenu" src="'menuTemplate.html'" class="list-group-submenu" ng-if="data.subMenu.length > 0" ng-attr-id="{{data.link}}">
    </div>

</script>

here an example that i use to understand

and this is the result

when i click nothing happends

Console: Syntax error, unrecognized expression: index/titleone.html

Answer 1

Your menu is basically just a bunch of nested lists; after looking at this post, I was able to take your subMenu data structure and adapt it to generate a simple list:

HTML

<div ng-app>
<script type="text/ng-template" id="menu-renderer">
    {{item.title}}    
    <ul ng-if="item.subMenu && item.subMenu.length > 0">
        <li ng-repeat="item in item.subMenu" ng-include="'menu-renderer'"></li>
    </ul>
</script>

  <div ng-controller="MenuCtrl">
    <ul>
        <li ng-repeat="item in subMenu" ng-include="'menu-renderer'"></li>
    </ul>
  </div>
</div>

Javascript

function MenuCtrl($scope) {
$scope.subMenu = [
{
    title: "User Manual",
    subMenu: [
    {
        title: "Title one",
        link: "index/titleone.html",
        icon:"fa fa-caret-down",
        subMenu: []
    },
    {
        title: "Basic",
        link: "index/basic/basic.html",
        icon:"fa fa-caret-down",
        subMenu: [
        {
            title: "Basic Function",
            link: "index/basic/function.html",
            icon:"fa fa-caret-down",
            subMenu: []
        }]  
    }]
}];
}

I have this fiddle if you'd like to see it in action.

Does that help?