AnuglarUI Typeahead Work with Objects instead of SoureArray

The thing to ntice about the typeahead directive from http://angular-ui.github.io/bootstrap/ is that tries to mimic syntax used by the select directive from AngularJS. It means that all the expressions used to select a model to bind and a label are AngularJS expressions. This is turns means that you can use whatever AngularJS expression to calculate text of your label. For example, to display desired text you could write:

Provided that your data model looks like follows:

Working plunk here: http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview

Writing complex expressions for a label in the typeahead attribute might get ugly but nothing stops you from moving label calculation logic to a function exposed on a scope, ex.:

where the label is a function exposed on a scope:

Another plunk: http://plnkr.co/edit/ftKZ96UrVfyIg6Enp7Cy?p=preview

As far as your question regarding icons go – you could embed HTML in the label expressions but this gets awful to write and maintain. Fortunately the typeahead directive allows you to provide a custom template for your matched item, like so:

In the custom template you can use any expressions or AngularJS directive you would like. Adding icons becomes trivial with a little help from the ngClass directive:

And the working plunk: http://plnkr.co/edit/me20JzvukYbK0WGy6fn4?p=preview


Typeahead callback function typeahead-on-select

A callback method in controller can be added as below:

In view add the following

see the url for further information (search for onSelect)

https://github.com/angular-ui/bootstrap/blob/91ac17c9ed691a99647b66b3f464e3585398be19/src/typeahead/test/typeahead.spec.js#L372


Example in Project

When a match is selected, the “onSelect” callback function executed. It will return one of the whole object selected by $item or $model and return lable by $label

Resource: Stackoverflow

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA