twitter-bootstrap Angular UI 引导程序 - 在 typeahead-no-results 上显示下拉列表

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/33321439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 23:17:41  来源:igfitidea点击:

Angular UI bootstrap - show dropdown on typeahead-no-results

javascripttwitter-bootstrapangular-ui-bootstrapangular-ui-typeahead

提问by Thomas

tryng to get a dropdown when no result on typeahead but, the drop down menu dosen't show view

尝试在输入前没有结果时获得下拉菜单,但下拉菜单不显示视图

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

removing class="dropdown-menu" gives me the li with no result, but i dont get it as a dropdown menu

删除 class="dropdown-menu" 给了我没有结果的 li,但我没有把它作为下拉菜单

who do i toggle this dropdown menu on no result ?

如果没有结果,我该给谁切换这个下拉菜单?

回答by davidkonrad

The problem is that the dropdown never is triggered, and by that not rendered properly. You are just making the markup visible.

问题是下拉菜单永远不会被触发,并且没有正确呈现。您只是使标记可见。

You can set auto-close="disabled"and is-open="true"to show the dropdown properly upon noResults:

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

working demo -> http://plnkr.co/edit/4vVznXyjZo3HuIb2p5as?p=preview

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

NB: The plnkr is using ui-bootstrap version 0.14.3, if you are using a version prior to 0.14.0 then do not append uib-prefixes.

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