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

Question

我正在使用 Angular UI使用 bootstrap，我正在使用 uib-dropdown。我已将自动关闭设置为外部点击，但我还想在下拉列表中创建一个按钮来关闭它。我尝试将 uib-dropdown-toggle 添加到其中一个元素，但这完全破坏了下拉菜单(它根本打不开)。如何创建关闭下拉菜单的元素？相关代码:

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

只需使用 is-open 属性和 Angular 变量来控制下拉菜单的“开放性”。然后您可以通过编程方式将此变量值设置为 false 以关闭下拉列表。

这是您的代码中的示例:

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