Style list in typeahead

[artworkad]

Hi,

I want to add a class to the typeahead list like this

ng-class="{odd-value : !($index%2==0)}"

to colorize the background of a list entry. Is this possible?

[pkozlowski-opensource]

Yes. The easiest way of doing this in 0.4.0 release is to override a template for the typeahead popup as shown here:
http://plnkr.co/edit/vtQq2i8Cj8E8PJWZcAgl?p=preview

More info about templates customization / overriding can be found here:
http://stackoverflow.com/q/17660947/1418796

Be aware that the overridden template is applied to all the typeahead instances so all the instances will get the same styling. This is desirable most of the time to keep the consistent look & feel of an application.

In the upcoming version (0.5.0) it will be possible to customize a template for each separate match item so you will be able to customize look & feel per instance. But it made me realized that $index is not exposed to custom templates so I'm going to keep this open.

Anyway, you should be able to easily customize typeaheads to your liking today! Let me know if this does the trick for you.

[artworkad]

@pkozlowski-opensource thank you for your advise. I have two use cases for typeahead in my webapp. Each requires a different styling based on the data.

+1 So I am looking forward to 0.5 release.

---

Regarding the template, it would make things very simple if we could assign a template like:

<input type="text" ng-typeahead-template="fancy.html" typeahead="...">

This way you could inject a style for the 'li' element.

[pkozlowski-opensource]

@artworkad Custom templates for match items (that can be configured per-typeahead instance) will be part of the next release (0.5.0). You can see usage example in this test: https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/test/typeahead.spec.js#L233-L243