Typeahead using object name

Question

I'm trying to setup a typeahead using AngularJS & UI Bootstrap like so:

.html

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

<span>{{selectedStuff.name}}</span>
<span>{{selectedStuff.desc}}</span>

.js

$scope.stuffs= [
                {
                 "name":"thing1",
                 "desc":"this is the first thing"
                },
                {
                 "name":"thing2",
                 "desc":"this is the second thing"
                }
               ]

Currently, I've been able to update the model with the selected name, but my goal is to pass along the entire object via the typeahead. Is there a clean way to do this using only the input?

score 26 · Accepted Answer · answered Apr 15 '13 at 14:48

26

Sure thing :-)

The typeahead directive from http://angular-ui.github.io/bootstrap/ uses the same super-flexible syntax as the AngularJS select directive for ng-options. So you could write:

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

Here is a working plunk: http://plnkr.co/edit/5kGZkNPZ7rIFfb4Rvxej?p=preview

answered Apr 15 '13 at 14:48

pkozlowski.opensource

117,202
60
326
286

3

Amazing! Just as simple and awesome as I was hoping. Thank you! – Jesse Apr 15 '13 at 17:28
1

I'm seeing '[Object object]' in the input box because I have to instantiate it in the controller in order to use it in the controller. If I don't instantiate it, and it's undefined at first, then it displays fine. This is my predicament. Any ideas? – morgs32 Dec 24 '13 at 20:16
I am having the same error..object object appears after cliking, morgs32 did you manage to fix this? – Bryan Arbelo - MaG3Stican Jun 18 '14 at 15:56
1

Doing something like this `typeahead="item.ItemID for item in items_vendors.items | filter:$viewValue | limitTo:8"` helped me, where `ItemID` is what I want displayed. – Aarmora Oct 20 '14 at 19:51

score 0 · Answer 2 · answered Jan 15 '15 at 19:05

0

I had the same problem. I have solved it by

typeahead="country.name for country in countryList | filter:$viewValue | limitTo:8"

here countryList is a list of country object. name is one of property of country object. For me it is working fine.

answered Jan 15 '15 at 19:05

zahid9i

596
1
8
17

Typeahead using object name

2 Answers2

Linked