Angularjs Angular JS和Bootstrap-在子菜单中设置多个子菜单

首先，我要说的是，我正处于学习使用角形工具的初级阶段。我已经做了多次搜索，看到了多个使用子菜单设置菜单的示例，但没有发现子菜单中包含子菜单的示例

你可能已经注意到，我也不太擅长写问题。让我继续以代码和小提琴为例。希望有人能解释为什么这不起作用，以及我的逻辑哪里出了问题

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>

---

您忘了在菜单上设置正确的类

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

<!-- ng-class added in this line -->
            <li ng-repeat="subloc in loc.submenu" ng-class="{'dropdown-submenu' : subloc.subsubmenu && subloc.subsubmenu.length}">
              <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>

---

我建议将“subsubmenu”重命名为“submenu”，并从这个混乱的结构中提取指令。

这解释了很多。谢谢你的帮助，我仍然在弄清楚这件事，并试图了解它的头绪，并把它作为一个项目来学习。我还将进行其他更改。再次感谢你

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

<!-- ng-class added in this line -->
            <li ng-repeat="subloc in loc.submenu" ng-class="{'dropdown-submenu' : subloc.subsubmenu && subloc.subsubmenu.length}">
              <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>