AngularJS UI Typeahead label and value

Question

I am using the typehead directive to autocomplete a list of states. The list contains a bunch of objects as follows

{
  StateId: 0,
  StateCode: "AK",
  StateDesc: "ALASKA"
}

The typehead HTML is as follows

typeahead="state.StateCode for state in States | filter:$viewValue | limitTo:8"

This works great as is however I'd like to improve it a little bit. Is it possible to have the autocomplete dropdown to show (and search on) StateDesc but once you click on the drop down item the textbox was populated with StateCode?

Thanks!

Take a look at [this answer](http://stackoverflow.com/questions/20255477/kendo-angular-multiselect-set-selected-values/20742127#20742127), not angular ui but pretty close to what you want, at least you can dig through the directive code and change it as you see fit. — Mohammad Sepahvand, Dec 26 '13 at 20:46

score 10 · Accepted Answer · answered Dec 26 '13 at 22:09

10

The HTML needs to be

typeahead="state.StateCode as state.StateDesc for state in States | filter:$viewValue | limitTo:8"

Thanks to Pushpak for pointing me in the right direction.

answered Dec 26 '13 at 22:09

americanslon

4,048
4
32
57

4

Since the answer from Pushpak is the correct one, you should mark his answer as the correct one, not your own. – Diego Vieira Jun 01 '15 at 23:39
@DiegoVieira it's not correct, it's a step towards what I asked. Look closely at what I asked vs his answer vs the final result. – americanslon Jun 03 '15 at 15:34
How does this relate to ng-model? When I select a value using this technique, the StateCode is bound to the model and thus visible in the input – Anonymoose Feb 15 '18 at 13:59
@Hazaart which is what I wanted. This thing before `as` in this case `state.StateCode` is your model. If you want your whole state object to be your model then it's `typeahead="state as state.StateDesc for state in States | filter:$viewValue | limitTo:8"` – americanslon Feb 16 '18 at 20:30
didn't worked for me: `subconta.subconta as subconta.descricao for subconta in appContabil.subcontas | filter:$viewValue | limitTo:23` shows `subconta.subconta` in the input and sets it to the model (I need to show `subconta.descricao` in the input). Note: using this directly in ng-options *does* work – Bernardo Dal Corno Mar 07 '18 at 19:56

score 8 · Answer 2 · answered Dec 26 '13 at 21:21

8

Assuming you are using angular-ui bootstrap typeahead, heres a plunkr of how this can be achieved easily.

http://plnkr.co/edit/NpWC6qvrzx7swGRFlpUR?p=preview

answered Dec 26 '13 at 21:21

Pushpak

161
2
8

AngularJS UI Typeahead label and value

2 Answers2