Question

我想在项目中添加下拉菜单，并从示例中获取代码。下拉显示在示例中，但是当我点击它时没有任何反应。

<form class="form" name="form"  novalidate>
  <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>
  <div>
</form>

现在是这个html的控制器：

angular.module('startupApp').controller('DropdownCtrl', function ($scope, $log) {
    $scope.items = [
        'The first choice!',
        'And another choice for you.',
        'but wait! A third!'
    ];

    $scope.status = {
        isopen: false
    };

    $scope.toggled = function(open) {
        $log.log('Dropdown is now: ', open);
    };

    $scope.toggleDropdown = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.status.isopen = !$scope.status.isopen;
    };
});

Answer 1

我遇到了同样的问题，我通过删除下拉切换

这一行解决了问题

我不知道问题是什么，但它以这种方式运作良好

我在这做了什么：这是原始的例子：

    <!-- 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>

这是没有下拉切换

的代码

<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
  <button type="button" class="btn btn-primary 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>

编辑：

如果您使用angular-ui-bootstrap 版本：0.10.0

，则上述示例有效

现在我已经使用此

更改了ui-bootstrap

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

现在所有的工作都像魅力

Answer 2

您的代码中存在一些问题：

您的HTML无效，最后<div>代码不应该在那里

<form class="form" name="form" novalidate>
    <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>
</form>

您没有将ui.bootstrap作为模块依赖项

引用

angular.module('startupApp', [
    'ui.bootstrap'
])

您是否包含了正确的文件？

AngularJS
Angular UI Bootstrap
Bootstrap CSS

您的控制器中不需要任何特殊内容，dropdown和dropdown-toggle指令是自给自足的。

JsFiddle Demo

Answer 3

经过多次努力，我才找到了适合我案例的答案。我只需要在我的angular.module中添加parse-angular（＆＃39; myapp＆＃39; [＆＃39; parse-angular＆＃39;]）。

Answer 4

首先，我要感谢Jorge Casariego his answer。他的回答帮助我进一步发展。

最后有一个问题，当有人与Dropdown（see example of them here进行互动时，$scope.toggled = function(open) {...}和$scope.toggleDropdown = function($event) {...}都没有被调用。在查看ui-bootstrap-tpls-0.10.0.js代码后，我必须进一步调整html代码：

属性dropdown应该是类值而不是属性本身。
is-open=...不需要，ui-bootstrap会照顾它
将ng-click附加到列表中的<a>元素。

这对我不起作用（ dropdown作为属性）：

<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
  <button type="button" class="btn btn-primary dropdown-toggle"
   ng-disabled="disabled">
    Choose category <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-repeat="category in interactions">
      <a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
       {{category.displayName}}
      </a>
    </li>
  </ul>
</div>

但是这样做了（将dropdown添加为类值）：

<!-- Single button -->
<div class="btn-group dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle"
   ng-disabled="disabled">
    Choose category <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li ng-repeat="category in interactions">
      <a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
       {{category.displayName}}
      </a>
    </li>
  </ul>
</div>

我的Angular App的其余部分就是这样的：

$scope.toggleDropdown = function($event) {
  $event.preventDefault();
  console.log('This is your event now: ', $event);
};

我知道angular-ui-bootstrap有更新的版本，但是为了记录，我把它放在这里。它有效with version 0.10.0。

应用Angular Bootstrap下拉示例

4 个答案: