javascript - Angular UI 引导 - 在 typeahead-no-results 上显示下拉菜单

尝试在类型ahead没有结果时显示下拉菜单，但下拉菜单没有显示视图

<div class="dropdown">
    <div class="form-group">
       <input placeholder="Vælg kunde" type="text" ng-model="customer"  typeahead-editable="false" uib-typeahead="customer as customer.customer for customer in customers | filter:$viewValue | limitTo:8" class="form-control"
            typeahead-popup-template-url="customPopupTemplate.html"
            typeahead-min-length="0"
            typeahead-no-results="noResults">
    </div>

    <div ng-if="noResults" dropdown-toggle>
       <ul class="dropdown-menu" >
           <li><a href="#">No result</a></li>
       </ul>
    </div>

</div>

移除 class="dropdown-menu" 会让我得到没有结果的 li，但我无法将其作为下拉菜单使用

当没有结果时，我如何切换此下拉菜单？

答案＃1

问题是下拉菜单从未被触发，因此无法正确渲染。你只是让标记可见而已。

你可以设置 auto-close="disabled" 和 is-open="true" 来在 noResults 时正确显示下拉菜单：

<div class="form-group"> 
  <input placeholder="Vælg kunde" type="text" ng-model="customer" typeahead-editable="false" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control" typeahead-min-length="0" typeahead-no-results="noResults">

   <span ng-if="noResults" auto-close="disabled" is-open="true" uib-dropdown uib-dropdown-toggle>
      <ul class="uib-dropdown-menu" >
        <li><a href>no results</a></li>
      </ul>
    </span>

</div>

工作演示 -> http://plnkr.co/edit/4vVznXyjZo3HuIb2p5as?p=preview

注意：该 plnkr 使用的是 ui-bootstrap 版本 0.14.3，如果你使用的是 0.14.0 之前的版本，则不要添加 uib- 前缀。