javascript - Ionic、angularjs、bootstrap 3 的左侧多级菜单无法正常工作

Question

我需要这个

这是 Controller 代码:

$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: []
        }]  
    }]
};

我已经花了两个星期的时间来解决这个问题。请问有人可以帮助我吗？

就这样吧

<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>

模板

<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

这是结果

当我点击什么都没发生

控制台:语法错误，无法识别的表达式:index/titleone.html

Answer 1

您的菜单基本上只是一堆嵌套列表；看了之后 this post ，我能够采用您的 subMenu 数据结构并对其进行调整以生成一个简单的列表:

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: []
        }]  
    }]
}];
}

我有this fiddle如果你想看到它的实际效果。

这有帮助吗？