Search code examples
angularjsng-options

Style part of ng-option text

Need some help with styling an angularjs ng-option. I want it to look like this:enter image description here

So I have the ng-option like this. 

<select ng-options="servicepoint.id as servicepoint.name+' '+servicepoint.routeDistance+' m' for servicepoint in $ctrl.servicepoints">
</select>

This result in this:

enter image description here

So do you guys know if I can style just the last part with the meters to a blue color and make an ellipse if text is to long. The distans should be visible all the time. It seems like <option> can't have <span>-tags or stuff like that so I can style the text?

I was trying to put the option out in an ng-repeat and style it there but no success. 

<select>
    <option ng-repeat="service in $ctrl.servicepoints">
        <span>{{service.name}}</span><span style="color: blue">{{service.routeDistance}} m</span>
    </option>
</select>

Anyone that can guide me in the right direction?

Solution

  • Unfortunately, here is a full response from what I gathered, I wish I found a simpler hack around it but these are the facts:

    • This element is rendered by the OS, not HTML
    • It cannot be styled via CSS.
    • What is worse, option element will not render any elements inside it, the only text node is allowed to be a child of option element in DOM.

    Solution:

    There are replacement plug-ins that look like a but are actually composed of regular HTML elements that CAN be styled. This is where you should begin your search.

    For further explanation: this text

    The text is decent I read through it, tackles the problem from discovery to solution phase.