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

时间:2014-08-31 13:17:42

标签: angularjs twitter-bootstrap

首先让我说我非常处于学习使用Angular的初级阶段。我已经完成了多次搜索,并看到了设置子菜单菜单的多个示例,但是我发现在子菜单中没有子菜单。

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

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

}

My Fiddle

1 个答案:

答案 0 :(得分:1)

您忘了在菜单上设置正确的课程。

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

我建议重命名&#34; subsubmenu&#34;只是&#34;子菜单&#34;并从这个混乱的结构中提取指令。