jmona789 jmona789 - 26 days ago 22
AngularJS Question

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

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>

Answer

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