Question

我有一个在ng-repeat循环中构建的按钮列表。我想要一个下拉菜单与他们共享。

菜单必须了解按钮中的上下文/基础对象，以便从菜单应用的任何操作仅影响该记录。

我一直试图在这里介绍一些引导示例：

http://angular-ui.github.io/bootstrap/

然而，一旦我有多个菜单，这两个菜单都没有加载，见于此Plunker：

http://plnkr.co/edit/SIfEw0lxwen8YDAVKDfA?p=preview

    <!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="DropdownCtrl">


    <!-- Single button -->
    <div class="btn-group" dropdown is-open="status.isopen">
      <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

    <!-- Second button -->
    <div id="hello" class="btn-group" dropdown is-open="status.isopen">
      <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>


</div>
  </body>
</html>

我也无法理解如何使菜单成为可重复使用的对象，因为它必须动态地将动作应用于点击的任何按钮。

Answer 1

我试着摆弄你的傻瓜。

请看这个。

http://plnkr.co/edit/zhzpIoIgoaxUkjEbAQuT?p=preview

根据文件，您可以使用is-open来切换或添加元素内部以在单击时切换它。我认为问题在于您使用isopen和dropdown toggle指令。还有关于使菜单成为可重用组件，我们会去制作菜单是一个自定义指令，它可以接受双向绑定数组作用域变量作为其菜单项的输入

所以就像这样

<div class="btn-group" ng-repeat ="button in buttons">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
        {{button.name}}<span class="caret"></span>
      </button>
<menu items-array="button.menuitems"></menu>
</div>

跨多个按钮的下拉菜单

1 个答案: