angular ng-option 添加圖標

Question

我正在嘗試編寫一個用於選擇國家的下拉列表，是否可以在國家名稱旁邊添加國家國旗？

 <div class="chosen-input-group col-sm-10 ">
        <select id="country_type" chosen data-placeholder="-- 國家 --" disable-search="false"
                ng-options="country_.country_id as country_.name  for country_ in vm.country_data" 
                ng-model="vm.item.country_id">
            <option value=""> -- 國家 --</option>
        </select>
    </div>

Answer 1

您可以在選項標簽上使用ng-repeat，然后根據需要使用圖像設置選項樣式

<select >
  <option ng-repeat="country_ in vm.country_data"
  value="country_.country_id"
  style="background-image:url({{country_.name}}.png);">
    {{ country_.name }}
  </option>
</select> 

Answer 2

不能將本機選擇與選項一起使用。 看看https://github.com/angular-ui/ui-select

Soruce： 帶圖像的角度選擇

Answer 3

我將圖標直接添加到ng-template標簽中，它起作用了：

<ng-select [clearable]="false" [searchable]="false" [items]="items" bindLabel="libelle" [(ngModel)]="selectedItem">
    <ng-template ng-label-tmp let-item="item">
        <i class="fa fa-eye"></i>
        <b> {{item.libelle}}</b>
    </ng-template>
    <ng-template ng-option-tmp let-item="item" let-index="index">
        <i class="fa fa-eye"></i>
        <b> {{item.libelle}}</b>
    </ng-template>
</ng-select>