'How to add image in dropdown in angularjs

I am working on dropdown with image in angularjs, i tried many solution but havent get any success.

My combo data is coming in json format with three elements id , image and value. These dropdown numbers are also dynamic as per number of rows are there in model.

Please share the solution for that.

Thanks you.



Solution 1:[1]

Please Try this it will work out,

   <select ng-model="choice">
        <option ng-repeat="item in itemsList" data-image="{{item.url}}">{{item.label}}</option>
    <select>

Solution 2:[2]

   <select ng-model="image_chosen">
     <option ng-repeat="data in list" data-image="{{data.url}}" value="{{data.id}}">{{data.value}}</option>
     <option value="">Choose a option</option>
   </select>

Solution 3:[3]

Checkout a example at angularjs select option with custom format value

enter image description here

Hope it helps.

Solution 4:[4]

Write like this in option tag

ng-repeat="obj in xxxxComboData" data-image="{{obj.image}}"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Archana
Solution 2 Nikhil T Nair
Solution 3 Lewis Hai
Solution 4