2014-08-31 59 views
0

讓我開始說我非常處於學習使用Angular的初始階段。我已經完成了多次搜索,並且看到了多個設置子菜單的菜單的例子,但是我沒有發現任何可以看到子菜單中有子菜單的例子。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> 

CSS

.menu { 

      position:relative; 

} 

.menu > .dropdown-menu { 

      position:static; 

      display:block; 

} 

My Fiddle

回答

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> 

我建議將「subsubmenu」重命名爲「submenu」,並從這個混亂的結構中提取指令。

+0

這解釋了很多。感謝您的幫助,我仍然在想這些東西,並嘗試做出正面或反面的看法,並將其作爲一個項目來學習。我也會做出其他改變。再次感謝你 – Hintshigen 2014-08-31 13:54:25