ng-option 文本的样式部分

Question

在 angularjs ng-option 样式方面需要一些帮助。我希望它看起来像这样：

所以我有这样的 ng-option。

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

结果是：

所以你们知道我是否可以将仪表的最后一部分设置为蓝色，如果文本太长则制作一个椭圆。距离应该始终可见。似乎 <option> 不能有 <span> 标签或类似的东西，所以我可以设置文本的样式？

我试图将选项放在 ng-repeat 中并在那里设置样式但没有成功。

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

谁能指导我正确的方向？

Answer 1

不幸的是，这是我收集到的完整回复，我希望我能找到更简单的解决方法，但事实是：

此元素由 OS 呈现，而不是 HTML
不能通过CSS设置样式。
更糟糕的是，option 元素不会呈现其中的任何元素，唯一的文本节点被允许是 DOM 中 option 元素的子元素。

解决方案：

有些替换插件看起来像，但实际上由可以设置样式的常规 HTML 元素组成。这是您应该开始搜索的地方。

进一步说明： this text

文字不错我通读了一遍，解决了从发现到解决阶段的问题。

ng-option 文本的样式部分

Style part of ng-option text

angularjs

ng-options