ng选项文字的样式部分

Question

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

所以我有这样的ng选项。

<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

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

• 此元素是由操作系统而不是HTML呈现的
• 无法通过CSS设置样式。
• 更糟糕的是， option元素不会在其中显示任何元素，唯一的文本节点是DOM中option元素的子元素。

解决方案：

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

进一步说明： this text

我仔细阅读了这段文字，解决了从发现到解决阶段的问题。