johnnyfittizio johnnyfittizio - 3 months ago 32
AngularJS Question

Angular select with images

THE SITUATION:

I need to insert flags inside the language select. I have searched in Google and StackOverflow but the solutions founded are not working for me.

THE CODE:

In the controller:

$scope.language_list = [{'name': 'english', 'url': 'https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/gb.png'},{'name': 'italian', 'url': 'https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/it.png'}];


In the view:

<select ng-model="language_selected">
<option ng-repeat="language in language_list" data-image="{{language.url}}" >{{language.name}}</option>
</select>


EXAMPLE:

http://jsfiddle.net/tcVhN/168/

THE QUESTION:

How can i insert images inside the angular select?

EDIT:

Here is the Plunker of the solution, cleaned up:

http://plnkr.co/edit/hMlNjkDL3l0QKF37pCa0?p=preview

Answer

As other answers you can not use <options> to add an image, however you can use angular module ui-select to achieve what you want to do.

Here is a demo with ui-select with your data.

Clean up the code and get what you need.

If you're not interested in search box override the CSS as,

 .select2-search {
      display: none;
 }

DEMO

Comments