CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
jmona789
jmona789

Reputation: 2839

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>

Upvotes: 6

Views: 6789

Answers (1)

Naigel
Naigel

Reputation: 9644

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>

Upvotes: 8

Related Questions