Angular：如何制作将在单击时关闭 UI bootstrap 下拉菜单的元素

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 变量来控制下拉列表的 "openness"。然后您可以通过编程方式将此变量值设置为 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>

Angular：如何制作将在单击时关闭 UI bootstrap 下拉菜单的元素

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

javascript

angularjs

angular-ui-bootstrap