Bootstrap angulsrjs mit Untermenü-Link funktioniert nicht

Question

Im Erstellen eines Menüs aus JSON-Datei, alles erzeugt gut, aber Links ohne Untermenü funktionieren nicht, wenn ich auf sie klicke.

wenn ich entfernen Dropdown aus li dann Haupt-Links funktionieren aber nicht Drop-Down-

für das Schauen danke :).

Demo: JS Bin demo

HTML:

<div ng-controller="nav"> 
       <ul class="nav navbar-nav"> 
        <li ng-repeat="m in menu" ng-class="{ active: isActive(m.url), 'dropdown' : m.submenu}" dropdown> 
         <a href="{{m.url}}" ng-class="{active: isActive(m.url), 'dropdown-toggle' : m.submenu}" dropdown-toggle>{{m.title}} <b class="caret" ng-if="m.submenu"></b> 
         </a> 
         <ul ng-if="m.submenu" class="dropdown-menu"> 
          <li ng-repeat="sm in m.submenu" ng-class="{'dropdown-header': sm.header, 'divider': sm.divider}"> 
           {{sm.divider}} 
           <b ng-if="sm.header">{{sm.header}}</b> 
           <a href="{{sm.url}}" ng-if="sm.url && sm.title">{{sm.title}}</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </div> 

Winkel:

app.controller('nav', function ($scope, $location) { 
    $scope.menu = [ 
     { 
      "title": "Dashboard", <-- dont work 
      "url": "#/dashboard" 
    }, 
     { 
      "title": "HRM", 
      "submenu": [ 
       { 
        "title": "Employees", 
        "url": "#/employee" 
     }, 
       { 
        "title": "Holiday", 
        "url": "#/holidays" 
     }, 
       { 
        "divider": "true" 
     }, 
       { 
        "header": "Header 2" 
     }, 
       { 
        "title": "Again...a link.", 
        "url": "errrr" 
     } 
     ] 
    }, 
     { 
      "title": "Attandance", <-- dont work 
      "url": "#/attandance" 
    }, 
     { 
      "title": "Reports", 
      "submenu": [ 
       { 
        "title": "Some Link", 
        "url": "some/place" 
     }, 
       { 
        "title": "Another Link", 
        "url": "some/other/place" 
     }, 
       { 
        "divider": "true" 
     }, 
       { 
        "header": "Header 2" 
     }, 
       { 
        "title": "Again...a link.", 
        "url": "errrr" 
     } 
     ] 
    } 
    ]; 

    $scope.isActive = function (ui) { 
     var loc = ui; 
     if (loc) { 
      loc = loc.replace("/#", "").replace("#", ""); 

      if ($location.path().indexOf(loc) != -1) { 
       console.log(ui); 
       return true; 
      } 
     } 
    }; 

}); 

Answer 1

Ich habe versucht, mit den Einzelteilen zu trennen, mit und ohne Drop-Down „ng-repeat-start "

<ul class="nav navbar-nav"> 
    <span ng-repeat-start="m in menu" ></span> 
    <li ng-if="m.submenu !== undefined" dropdown> 
     <a href="{{m.url}}" dropdown-toggle> 
      {{m.title}} <b class="caret"></b> 
     </a> 
     <ul class="dropdown-menu"> 
      <li ng-repeat="sm in m.submenu" > 
       {{sm.divider}} 
       <b ng-if="sm.header">{{sm.header}}</b> 
       <a href="{{sm.url}}" ng-if="sm.url && sm.title">{{sm.title}}</a> 
      </li> 
     </ul> 
    </li> 
    <li ng-if="m.submenu === undefined"> 
     <a href="{{m.url}}" > 
      {{m.title}} 
     </a> 
    </li> 
    <span ng-repeat-end></span> 
</ul>