Question

我有Angular 1.2.1和Bootstrap 3.0.2

带有下拉菜单的普通香草导航菜单工作正常，但是当我尝试使用ng-repeat生成菜单时，子菜单将不会触发。

HTML：

            <ul class="nav navbar-nav" ng-repeat="data in main_menu">
                <li ng-class="{'dropdown' : data.nodes}">
                  <a href="{{data.link}}" ng-class="{'dropdown-toggle' : data.nodes}">{{data.name}} <b class="caret" ng-if="data.nodes"></b>
                  <ul ng-if="data.nodes" ng-repeat="items in data.nodes" class="dropdown-menu">
                      <li><a href="{{items.link}}">{{items.name}}</a></li>
                  </ul>
                </li>
            </ul>

在控制器中：

$scope.main_menu = [
  {
    name: 'Home',
    class: '',
    link: '/',
    nodes: false
  },
  {
    name: "DropDown",
    class: 'dropdown-toggle',
    link: '#',
    nodes: [
      {
        name: "Node2",
        class: '',
        link: 'link'
      },
      {
        name: "Node2",
        class: '',
        link: 'link'
      },
      {
         name: "Node2",
         class: '',
         link: 'link'
      },
      {
         name: "Node2",
         class: '',
         link: 'link'
      }
    ]
  }

 ];

正常的bootstrap html子菜单功能正常工作.. 有什么建议吗？

检查后..

Angular html Block不正确，通过此调整，它会呈现正确的html - 下拉列表仍无法正常工作

            <ul class="nav navbar-nav" >
                <li ng-repeat="data in main_menu" ng-class="{'dropdown' : data.nodes}">
                  <a href="{{data.link}}" ng-class="{'dropdown-toggle' : data.nodes}">{{data.name}} <b class="caret" ng-if="data.nodes"></b></a>
                  <ul ng-if="data.nodes"  class="dropdown-menu">
                      <li ng-repeat="items in data.nodes"><a href="{{items.link}}">{{items.name}}</a></li>
                  </ul>
                </li>
            </ul>

Answer 1

两个步骤：

为链接添加at data-toggle="dropdown"。
更新控制器，将link: '#'更改为link: ''。

Angular Bootstrap 3导航栏子菜单不会触发

1 个答案: