AngularJS UI Bootstrap - выпадающая кнопка с Bootstrap 4 - PullRequest
Новая
       11

AngularJS UI Bootstrap - выпадающая кнопка с Bootstrap 4

0 голосов
/ 24 июня 2018

Я пытался отобразить элементы в моем дропдоне, но тщетно!Раскрывающийся список не работает.

Есть ли грубая ошибка в моем коде?Может кто-нибудь зажечь меня, пожалуйста?

Мой код для кнопки: 

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

Демо : Плункер

ОБНОВЛЕНИЕ : Я использую Bootstrap версии 4.1.0

Ответы [ 2 ]

0 голосов
/ 24 июня 2018

См. Этот комментарий на Github:

Я использую это временное исправление с последней загрузкой: 

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

- UI-Bootstap Issue # 4234 -Support Bootstrap 4 - Комментарий 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 на PLNKR

0 голосов
/ 24 июня 2018

В вашем плунжере есть несоответствие версий, которое является причиной этого. Лучше перейти на последние версии и их совместимость друг с другом. Проверьте этот 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">

и соответственно измененный html согласно директивам ui-bootstrap. 

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