angular ng-option add icon

Question

I am trying to write a dropdown list for selecting country, is possible to add flag of country next to the country name??

 <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>

is this angularjs v1 or angular v2+? – Suraj Rao Sep 27 '17 at 06:46 — Suraj Rao, Sep 27 '17 at 06:46

score 3 · Accepted Answer · answered Sep 27 '17 at 08:56

You could use ng-repeat on the option tag and then style the option with the image as you want it

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

score 1 · Answer 2 · answered Sep 27 '17 at 08:31

1

It is not possible using a native select with options. Have a look to https://github.com/angular-ui/ui-select

Soruce : Angular select with images

answered Sep 27 '17 at 08:31

Clement Dungler

737
6
10

Ousama · Answer 3 · 2022-12-19T14:04:00.640

I added the icon directly to the ng-template tag, and it works:

<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>

angular ng-option add icon

3 Answers3