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中的选项。但是，如果没有匹配，我应该怎么做才能在同一个弹出窗口中显示＃34;找不到匹配项？＆＃34;

提前致谢

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来检查它是否为no-results元素并使其不可点击。这样，用户就无法选择＆＃34;没有结果＆＃34;。

Answer 2

UI Bootstrap网站显示指令typeahead-no-results="noResults"。然后它有<div ng-show="noResults">带有一个glyphicon和消息＆＃34; No Results Found＆＃34;。完整的代码是：

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

AngularJS UI-Bootstrap Typeahead没有匹配项

2 个答案: