two dropdowns for Angular UI Bootstrap do not work

Question

I simply created a second dropdown by copying and pasting the official Angular UI Bootrstrap Dropdown sample and now neither one pulls down the menu. See plunker at

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

<!-- Single button 1-->
<div class="btn-group" dropdown is-open="status.isopen">
  <button id="btn1" 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>
<!-- Single button 2-->
<div class="btn-group" dropdown is-open="status.isopen">
  <button id="btn2" type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
    Button dropdown1 <span class="caret"></span>
  </button>
  <ul id="list2" 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>

Rob J · Accepted Answer · 2014-08-20 22:18:33Z

6

You need 2 separate variables for the is-open attribute, working plunk here

Code changed:

$scope.status = {
  isopen1: false,
  isopen2: false
 };


<div class="btn-group" dropdown is-open="status.isopen1">

<div class="btn-group" dropdown is-open="status.isopen2">

It's worth mentioning using the is-open attribute is not necessary. You will notice if you remove the is-open attribute with the bindings the dropdowns will work.

edited Aug 20, 2014 at 22:18

answered Aug 20, 2014 at 22:13

Rob J

6,6295 gold badges30 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sskasim Over a year ago

Thanks Rob J for the prompt response

Collectives™ on Stack Overflow

two dropdowns for Angular UI Bootstrap do not work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related