Angular: How to make an element that will close UI bootstrap dropdown on click

Question

I am using Angular UI with bootstrap and I'm using the uib-dropdown. I have auto-close set to outside click, but I want to also create a button in the dropdown that will close it. I tried adding uib-dropdown-toggle to one of the elements but that broke the drop down completely (it wouldn't open at all). How do I create an element that closes the drop down menu? Relevant code:

<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body">
  <ul class="list-unstyled">
    <!-- This is the button I want to close the dropdown -->
    <li><button type="button" class="btn btn-default">X</button></li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

jmona789 · Accepted Answer · 2016-11-09 16:27:28Z

8

Just use is-open attribute to control with and angular variable the "openness" of the dropdown. Then you can programmatically set this variable value to false to close the dropdown.

Here is an example from your code:

<div class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body" is-open="dropdownIsOpen">
  <ul class="list-unstyled">
    <!-- This is the button I want to close the dropdown -->
    <li><button type="button" class="btn btn-default" ng-click="dropdownIsOpen = false">X</button></li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

edited Nov 9, 2016 at 16:27

jmona789

2,8497 gold badges27 silver badges62 bronze badges

answered Nov 9, 2016 at 16:18

Naigel

9,76417 gold badges73 silver badges111 bronze badges

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

2 Comments

jmona789 Over a year ago

This did not work. Isn't the is-open in the scope of the directive itself and not the controller that the view is using? Is that why its not working?

jmona789 Over a year ago

Nevermind, got it working I had some extra html I forgot to include, I needed to add the is-open="dropdownIsOpen" to the button that opens the drop down not to the uib-dropdown-menu div.

Collectives™ on Stack Overflow

Angular: How to make an element that will close UI bootstrap dropdown on click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related