angular ui typeahead 显示不匹配的字符串

Question

我已将 ui.bootstrap typeahead 插件配置如下：

  <input type="text" 
          placeholder="Pick a stock" 
          ng-model="stock" 
          typeahead="stock.symbol + ' ' + stock.companyName for stock in stockList" 
          class="form-control input-sm" 
          typeahead-min-length=2 
          typeahead-wait-ms=0>

预期的行为是，如果我输入“face”.. 我希望只有带有“face”的字符串会显示在下拉列表中。但目前您会注意到所有字符串都会显示出来。无论您输入什么内容，$scope.stockList 中的所有字符串都会显示出来。

如何确保只显示匹配的字符串？

Plunkr here

Answer 1

为了只显示匹配的值，您需要对由 typeahead 指令填充的 $viewvalue 应用过滤器。

<input type="text" 
 ...
  ng-model="stock" typeahead="stock.symbol + ' ' + stock.companyName for stock in stockList 
  | filter:$viewValue" ...>

Demo

这是一个通用过滤器，它将匹配为对象中所有字段键入的字符，如果您想有选择地匹配特定字段，例如companyName，请相应地指定过滤器，即

 | filter:{companyName:$viewValue}"

sourceArray 表达式可以使用一个特殊的 $viewValue 变量，该变量对应于在输入中输入的值。