javascript - AngularJs - 在具有多个选择的选择框的选项中添加字形和数据

Question

我使用的选择框的multiple属性为true。我想在选项中的文本前面添加垃圾字形图标。我尝试了下面提到的一些方法:

选项1

<select name="multipleSelect" id="multipleSelect" ng-model="selectData" multiple>
      <option value="option1"><span class="glyphicon glyphicon-trash"></span>Option 1</option>
      <option value="option2"><span class="glyphicon glyphicon-trash"></span>Option 2</option>
      <option value="option3"><span class="glyphicon glyphicon-trash">Option 3</option>
    </select>

选项2

<select id="mySelect" data-show-icon="true">
  <option data-content="<i class='glyphicon glyphicon-cutlery'></i>">-</option>
  <option data-subtext="<i class='glyphicon glyphicon-eye-open'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-heart-empty'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-leaf'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-music'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-send'></i>"></option>
  <option data-subtext="<i class='glyphicon glyphicon-star'></i>"></option>
</select>

如果有人对此有任何解决方案，请告诉我。

Answer 1

您不能在选择框中使用标签。相反，您可以使用 Unicode 表示形式

对于引导

以下是带有 Unicode 的图标列表:

Bootstrap Unicode cheat sheet

试试这个

<select name="multipleSelect" id="multipleSelect" ng-model="selectData" multiple>
  <option value="option1">&#x2709; Option 1</option>
  <option value="option2">&#xe002; Option 2</option>
  <option value="option3">&#xe008; Option 3</option>
</select>

对于fontawesome

以下是带有 Unicode 的图标列表:

Fontawesome Unicode cheat sheet

试试这个

CSS

select {
  font-family: 'FontAwesome', 'Second Font name'
}

html

<select name="multipleSelect" id="multipleSelect" ng-model="selectData" multiple>
  <option value="option1">&#xf2ba; Option 1</option>
  <option value="option2">&#xf061; Option 2</option>
  <option value="option3">&#xf106; Option 3</option>
</select>

希望效果好。