角度选择与图像 [英] Angular select with images

问题描述

情况：

我需要在语言选择中插入标记。我在谷歌和StackOverflow上搜索过，但所建立的解决方案对我不起作用。

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.

代码：

在控制器中：

 $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'}];

在视图中：

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

示例：

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

问题：

如何在角度选择中插入图像？

How can i insert images inside the angular select?

编辑：

以下是解决方案的Plunker，已清理：

Here is the Plunker of the solution, cleaned up:

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

推荐答案

作为其他答案，您无法使用< options> 添加图像，但是你可以使用角度模块 ui-select 实现您想要的目标。

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.

这是一个 使用您的数据进行ui-select演示 。

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

清理代码并获得所需内容。

Clean up the code and get what you need.

如果您对搜索框不感兴趣将CSS覆盖为，

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

 .select2-search {
      display: none;
 }

DEMO

这篇关于角度选择与图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！