更新

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

在Github上查看此评论：

我正在使用最新的引导程序使用此临时修复程序：
.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

Answer 2

您的插件有版本不匹配的原因。最好选择最新版本以及它们之间的兼容性。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>

AngularJS UI Bootstrap-具有Bootstrap 4的下拉按钮

2 个答案:

更新