CODEWITHSUNDEEP
htmlangular
Ekoar
Ekoar

Reputation: 481

angular ng-option add icon

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

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

Upvotes: 2

Views: 4964

Answers (3)

Ousama
Ousama

Reputation: 2790

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>

Upvotes: 0

Marcus H&#246;glund
Marcus H&#246;glund

Reputation: 16801

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>

Upvotes: 3

Clement Dungler
Clement Dungler

Reputation: 747

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

Upvotes: 1

Related Questions