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变量，该变量对应于输入中输入的值。

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

1 个答案: