不要在 ng-options 中包含标签答案

【问题标题】：Don't include label in ng-options不要在 ng-options 中包含标签
【发布时间】：2020-06-10 20:13:15
【问题描述】：

我有一个 ng-options 多选列表，我试图在带有 ::before 类的选项文本之前附加一些图标。这在 chrome 中很有效，但在 Firefox 中无效。 ::before 上的内容似乎抹去了选项文本。

.optionClass:before{
    content:"::before "
}

<select multiple="multiple">
    <option class="optionClass">first</option>
    <option class="optionClass" label="sec" >second</option>
</select>

我希望同时看到“第一”和“第二”，但在 FF 中我只能看到第一。 “second”的文本被隐藏了。

再一次，这在 Chrome 中完美运行，但在 Firefox 中却不行。

有没有办法只用 css 解决这个问题？如果没有，有没有办法在将 ng-options 与 AngularJs 1.x 一起使用时将标签元素从选项中移除？

【问题讨论】：

【解决方案1】：

我为这个问题找到了一个简单的解决方法。

我为此问题创建了一个 FF 错误报告。其中一位开发人员说“这是意料之中的”，但随后他使用附加到内容的 attr(label) 进行引用。这在:before 内容中因多种原因不起作用（在我的情况下，因为我在该字段中显示 FA 图标）所以我将其附加到:after

解决方法是创建一个 css Firefox 选择器，然后将标签附加到 :after 使用 attr(label) 的内容字段希望这不会导致任何会显示标签两次的误报。到目前为止，在我测试过的有限情况下，它似乎能坚持下去。

@-moz-document url-prefix(){
    .optionClass:after{
        content: attr(label);
    }
}

【讨论】：