Angular UI bootstrap - 在typeahead-no-results上显示下拉列表

时间:2015-10-24 17:53:46

标签: javascript twitter-bootstrap angular-ui-bootstrap angular-ui-typeahead

尝试在没有结果的情况下获得下拉菜单,但下拉菜单不显示 图

<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 个答案:

答案 0 :(得分:5)

问题是永远不会触发下拉列表,也不会正确呈现下拉列表。你只是让标记可见。

您可以设置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>

工作演示 - &gt;的 http://plnkr.co/edit/4vVznXyjZo3HuIb2p5as?p=preview

NB :plnkr使用的是ui-bootstrap版本0.14.3,如果您使用的是0.14.0之前的版本,则不要附加uib-前缀。