Question

我正在使用多个属性为true的选择框。我想在Options中的文本前添加垃圾Glyphicon图标。我尝试了下面提到的一些方法：

选项-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表示

bootstrap

这里是带有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>

希望它运作良好。

AngularJs - 添加Glyphicons以及具有多个select的选择框选项中的数据

1 个答案: