javascript - Angular: How to make an element that will close UI bootstrap dropdown on click - Stack Overflow

admin管理员组

文章数量:1310493

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

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

• javascript
• angularjs
• angular-ui-bootstrap

Share Improve this question Follow edited Nov 9, 2016 at 16:26 jmona789 asked Nov 9, 2016 at 16:16 jmona789jmona789 2,83977 gold badges2626 silver badges6161 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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>

本文标签： javascriptAngular How to make an element that will close UI bootstrap dropdown on clickStack Overflow