Jesse Jesse - 10 months ago 57
AngularJS Question

Limit Angular UI-Bootstrap Typeahead to specific object property

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

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

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

Answer Source

The typeahead directive from the 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.

Back to your question - the filtering itself is done by the Angular's filter filter described here: The mentioned filter's syntax is flexible enough to limit searches to a selected set of properties:

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

Please notice: filter:{name: $viewValue}

Working plunk here: