AnuglarUI Typeahead Work with Objects instead of SoureArray

The thing to ntice about the typeahead directive from 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:

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:

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:

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)

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 *