AngularJS UI-Bootstrap Typeahead沒有匹配項

Question

我一直在尋找，但沒有發現與此有關的問題。

我正在使用Angular UI-bootstrap typeahead。

所以我有

<input type="text" ng-model="loc" typeahead="location for location in filteredLocations = (locations | filter:$viewValue)" class="form-control" placeholder="Location" />

當我鍵入它時會顯示typeahead-popup div中的選項。 但是，如果沒有匹配，我應該怎么做才能在同一個彈出窗口中顯示“找不到匹配項”？

提前致謝

Answer 1

您可以做的是創建自己的結果列表。 使用typeahead-template-url="customTemplate.html"並且這很容易：

<script type="text/ng-template" id="customTemplate.html">
  <a>
      <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
      <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
  </a>
</script>

如果沒有結果，則返回一個表示沒有結果的元素。 在ng-template中你可以輸入一個ng-if來檢查它是否是無結果元素並使其不可點擊。 這樣用戶就無法選擇“無結果”。

Answer 2

UI Bootstrap網站顯示了一個指令typeahead-no-results="noResults" 。 然后它有<div ng-show="noResults">帶有一個glyphicon和消息“No Results Found”。 完整的代碼是：

<h4>Asynchronous results</h4>
<pre>Model: {{asyncSelected | json}}</pre>
<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
  <i class="glyphicon glyphicon-remove"></i> No Results Found
</div>