CODEWITHSUNDEEP
angularjsangular-ui
americanslon
americanslon

Reputation: 4288

AngularJS UI Typeahead label and value

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!

Upvotes: 6

Views: 8197

Answers (2)

americanslon
americanslon

Reputation: 4288

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.

Upvotes: 10

Pushpak
Pushpak

Reputation: 161

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

Upvotes: 8

Related Questions