javascript - Angular UI bootstrap - show dropdown on typeahead-no-results - Stack Overflow

admin管理员组

文章数量:1289557

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

who do i toggle this dropdown menu on no result ?

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

who do i toggle this dropdown menu on no result ?

• javascript
• twitter-bootstrap
• angular-ui-bootstrap
• angular-ui-typeahead

Share Improve this question Follow edited Oct 24, 2015 at 19:49 davidkonrad 85.6k1717 gold badges209209 silver badges271271 bronze badges asked Oct 24, 2015 at 17:53 ThomasThomas 12311 gold badge11 silver badge1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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 :

<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

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.

本文标签： javascriptAngular UI bootstrapshow dropdown on typeaheadnoresultsStack Overflow