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

时间:2013-04-16 19:06:00

标签: angularjs angular-ui-bootstrap

我有以下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但仍然返回整个对象?

1 个答案:

答案 0 :(得分:38)

来自http://angular-ui.github.io/bootstrap/ repo的typeahead指令的构建非常适合现有的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