angularjs - 如何制作动态下拉菜单？

Question

  <ul class="nav navbar-nav friend-label">
                <li class="dropdown" ng-repeat="module in modules">
                     <a href="" class="dropdown-toggle" data-toggle="dropdown">  
                      {{module.ModuleName}} <b class="caret"></b>
                     </a>

                    <ul class="dropdown-menu">
                        <li  ng-repeat="subModule in module.SubModules">
                            <a href=""><b>{{subModule.SubModuleName}} </b>
                            </a>

                        </li>
                    </ul>
                </li>
   </ul>

由此，我开始跟进了。 问题是，当我确实有子菜单时，如果出现下拉菜单就没问题，但是当没有子菜单时，下拉菜单不应该出现。它仍然显示下拉小指针箭头。如果你点击它，它会出现空白下拉列表。

如图所示，联系我们菜单没有子菜单。仍然是空白的下拉菜单。我想用上面的 HTML 代码来阻止它。这是一个小问题。但我无法弄明白。

Answer 1

使用 ngRepeat 您可以从模型中动态填充菜单:

<span class="dropdown" dropdown on-toggle="toggled(open)">
      <a href class="dropdown-toggle" dropdown-toggle>
        Click me!
      </a>
      <ul class="dropdown-menu">
        <li ng-repeat="choice in items">
          <a ng-click="runFn(choice.fn)">{{choice.name}}</a> 
        </li>
      </ul>
    </span>

在 Plunker 上寻找完整的示例