将 Angular UI-Bootstrap Typeahead 限制为特定的对象属性 [英] Limit Angular UI-Bootstrap Typeahead to specific object property

问题描述

我有以下 Angular UI-Bootstrap typeahead 正在工作很棒:

I have the following Angular UI-Bootstrap typeahead working great:

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

不过，它几乎太工作得很好.我可以为了 typeahead 的目的显示 stuffs.name 并在 stuffs 中选择完整的 stuff 对象代码>.问题是我的 $viewValue 匹配了 stuff 中的所有属性，而不仅仅是 stuff.name.我尝试将 .name 添加到 typeahead 中的各个位置，但没有成功.有没有一种简单的方法可以只显示和匹配 .name 但仍然返回整个对象?

Though, it's almost working too great. I'm able to display the stuffs.name for the purposes of the typeahead AND select the full stuff object in stuffs. The problem is that my $viewValue is matching all of the properties in stuff instead of just the stuff.name. I've tried adding the .name to various places in the typeahead with no luck. Is there a straightforward way to display and match only the .name but still return the entire object?

推荐答案

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

The typeahead directive from the http://angular-ui.github.io/bootstrap/ repo was build to well fit into existing AngularJS ecosystem. This means that this directive tries to re-use as much as possible of syntax, filters and directives already used in AngularJS.

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

Back to your question - the filtering itself is done by the Angular's filter filter described here: http://docs.angularjs.org/api/ng.filter:filter The mentioned filter's syntax is flexible enough to limit searches to a selected set of properties:

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

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

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

这篇关于将 Angular UI-Bootstrap Typeahead 限制为特定的对象属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！