Typeahead using object name
10,527
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
Related videos on Youtube
Comments
-
Jesse almost 2 years
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? -
Jesse about 11 yearsAmazing! Just as simple and awesome as I was hoping. Thank you!
-
morgs32 over 10 yearsI'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?
-
Bryan Arbelo - MaG3Stican almost 10 yearsI am having the same error..object object appears after cliking, morgs32 did you manage to fix this?
-
Aarmora over 9 yearsDoing something like this
typeahead="item.ItemID for item in items_vendors.items | filter:$viewValue | limitTo:8"
helped me, whereItemID
is what I want displayed.