AngularJS UI Bootstrap - Bootstrap 4 的下拉按钮

Question

我一直在尝试显示我的 dropdon 中的元素，但没有成功！下拉菜单不起作用。

我的代码有错误吗？有人可以点亮我吗？

我的按钮代码：

<div class="btn-group" dropdown="dropdown" is-open="status.isopen">
   <button type="button" class="btn btn-default dropdown-toggle" ng-disabled="disabled">Button dropdown <span class="caret"></span></button>
   <ul class="dropdown-menu">
      <li ng-repeat="choice in items" ng-click="selectAOption(choice)">
         <a>{{ choice }}</a>
      </li>
   </ul>
</div>

演示：plunker

更新：我正在使用 Bootstrap 版本 4.1.0

Answer 1

您的 plunker 中存在版本不匹配导致的问题。最好去获取最新版本以及它们之间的兼容性。Check this plunkr

我添加了正确的版本控制

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://morgul.github.io/ui-bootstrap4/ui-bootstrap-tpls-3.0.3.min.js"></script>
<script src="example.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

并根据 ui-bootstrap 的指令相应地修改了 html。

    <div class="btn-group mb-2" uib-dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <a href="#" class="dropdown-item">Something else here</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Separated link</a>
      </div>
    </div>

Answer 2

查看 Github 上的评论：

I am using this temp fix, with the latest bootstrap:
.dropdown.open .dropdown-menu { display: block; }
— UI-Bootstap Issue#4234 - Support Bootstrap 4 - Comment Apr 30, 2018

更新

使用以下库：

<link href="//unpkg.com/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-animate/angular-animate.js"></script>
<script src="//unpkg.com/angular-sanitize/angular-sanitize.js"></script>
<script src="//unpkg.com/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js></script>

将此添加到您的 CSS：

.dropdown.open .dropdown-menu {
  display: block;
}

DEMO on PLNKR

AngularJS UI Bootstrap - Bootstrap 4 的下拉按钮

AngularJS UI Bootstrap - Dropdown button with Bootstrap 4

angularjs

angular-ui-bootstrap

bootstrap-4

更新