代码之家  ›  专栏  ›  技术社区  ›  Johan Byrén

ng选项文本的样式部分

  •  1
  • Johan Byrén  · 技术社区  · 6 年前

    需要一些帮助来设计AngularJS NG选项。 我希望它看起来像这样:

    所以我有这样的NG选项。

    <select ng options=“servicepoint.id as servicepoint.name+”“+servicepoint.routeDistance+'m'for servicepoint in$ctrl.servicepoints”>
    </选择>
    

    结果是:

    所以你们知道我能不能把最后一部分用米画成蓝色,如果文字长的话画成椭圆。distans应该一直可见。 它看起来像是<option>can't have<span>-tags or stufactures like that so I can style the text?

    我试着把这个选项放在一个ng重复中,并在那里进行风格设计,但没有成功。

    <select>
    <option ng repeat=“服务于$ctrl.servicepoints”>
    <SPAN>service.name</SPAN><SPAN style=“color:blue”>service.routeDistance m</SPAN>
    </选项>
    </选择>
    

    有人能指引我走正确的方向吗?

    所以我有这样的NG选项。

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

    结果是:

    enter image description here

    所以你们知道我能不能把最后一部分用米画成蓝色,如果文字长的话画成椭圆。distans应该一直可见。 看起来像<option>不可能有<span>-标签或类似的东西,这样我可以样式的文本?

    我试着把这个选项放在一个ng重复中,并在那里进行风格设计,但没有成功。

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

    有人能指引我走正确的方向吗?

    1 回复  |  直到 6 年前
        1
  •  2
  •   CodeSmith    6 年前

    不幸的是,这里是我收集到的全部回应,我希望我能找到一个更简单的黑客,但事实如下:

    • 此元素由操作系统呈现,而不是HTML
    • 不能通过CSS设置样式 .
    • 更糟的是, 选项元素不会呈现其中的任何元素 ,只允许文本节点是dom中option元素的子节点。

    解决方案:

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

    进一步解释: this text

    这篇文章读得很好,解决了从发现到解决的问题。