angularjs - 将 Angular UI-Bootstrap Typeahead 限制为特定对象属性

Question

我有以下Angular UI-Bootstrap typeahead工作得很好:

<input class="span2" type="text" ng-model="selectedStuff" typeahead="stuff as stuff.name for stuff in stuffs | filter:$viewValue"/>

不过，它的效果几乎太了。我能够显示stuffs.name出于 typeahead 的目的并选择完整的stuff stuffs 中的对象。问题是我的$viewValue匹配 stuff 中的所有属性而不仅仅是 stuff.name 。我尝试添加 .name到typeahead中的各个地方没有运气。有没有一种简单的方法来仅显示和匹配 .name但仍然返回整个对象？

Answer 1

来自 http://angular-ui.github.io/bootstrap/ 的 typeahead 指令repo 的构建是为了很好地适应现有的 AngularJS 生态系统。这意味着该指令尝试尽可能多地重用 AngularJS 中已使用的语法、过滤器和指令。

回到你的问题 - 过滤本身是由 Angular 的过滤器完成的，如下所述:http://docs.angularjs.org/api/ng.filter:filter上述过滤器的语法足够灵活，可以将搜索限制为选定的一组属性:

typeahead="stuff as stuff.name for stuff in stuffs | filter:{name: $viewValue}"

请注意:filter:{name: $viewValue}

在这里工作:http://plnkr.co/edit/o1qWKq8LSmbbmVaYkOvb?p=preview