Javascript 带图像的角度选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32068127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular select with images
提问by FrancescoMussi
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.
我需要在语言选择中插入标志。我在 Google 和 StackOverflow 中进行了搜索，但所建立的解决方案对我不起作用。
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/
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:
这是解决方案的Plunker，清理完毕：
回答by Kalhan.Toress
As other answers you can not use <options>to add an image, however you can use angular module ui-selectto achieve what you want to do.
作为其他答案，您不能<options>用来添加图像，但是您可以使用 angular 模块ui-select来实现您想要做的事情。
Here is a demo with ui-select with your data.
这是一个带有 ui-select 和 data的演示。
Clean up the code and get what you need.
清理代码并获得您需要的东西。
If you're not interested in search box override the CSS as,
如果您对搜索框不感兴趣，请将 CSS 覆盖为，
.select2-search {
display: none;
}
回答by MoLow
this is impossible with a native select element,
这对于本机选择元素是不可能的，
therfore, you need to design a selectbox using other html elements & css,
因此，您需要使用其他 html 元素和 css 设计一个选择框，
try this out:
试试这个：
var app = angular.module('app',[]);
//app.directive('appDirective', function() {});
//app.factory('appService', function() {});
function AppCtrl($scope) {
$scope.obj={language_selected : {'name':'Choose a language'}};
$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_list{
background-color: #fff;
border: 1px solid #b3b3b3;
cursor: pointer;
height: 21px;
line-height: 21px;
padding: 3px 5px;
position: relative;
vertical-align: middle;
width: 250px;
}
.select_list:after{
content:"▼";
position:absolute;
right:3px;
color:#b3b3b3;
}
.select_list > .options{
display:none;
position:absolute;
top:100%;
left:-1px;
width:100%;
border:1px solid #666;
padding:0;
margin:0;
}
.select_list.active > .options{
display:block;
}
.select_list > span, .select_list > .options li {
background-position: 5px center;
background-repeat: no-repeat;
padding-left: 30px;
list-style:none;
}
.select_list > .options li:hover {
background-color:#eee;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
<div class="select_list" ng-class='{active:active}' ng-click="active=!active">
<span ng-style="{'background-image':'url('+obj.language_selected.url+')'}">{{obj.language_selected.name}}</span>
<ul class="options">
<li class="select_list_option" ng-repeat="language in language_list" ng-click="obj.language_selected=language" ng-style="{'background-image':'url('+language.url+')'}">{{language.name}}</li>
</ul>
</div>
</div>回答by Nano
The Answer:
答案：
Its simply not possible.
它根本不可能。
The permitted content of a <option>tag is Text with eventually escaped characters (like é).
HTML isnt allowed.
<option>标签的允许内容是带有最终转义字符（如é）的文本。不允许使用 HTML。
See the docsfor more information.
有关更多信息，请参阅文档。
The solution:
解决方案：
Make a custom Dropdown with CSS and HTML.
使用 CSS 和 HTML 制作自定义下拉菜单。
回答by Ramesh Rajendran
It's not possible, as <option>only supports text.
这是不可能的，因为<option>只支持 text。
You may have to roll your own drop-down control using complex HTML/CSS/JavaScript. How to do it may or may not be within the scope of your question.
您可能必须使用复杂的 HTML/CSS/JavaScript 滚动您自己的下拉控件。如何做到这一点可能在您的问题范围内，也可能不在。
Alternatively, you may use a non-repeating background-imageand apply some padding on the text to achieve a similar effect. But if each <option>is to have a unique image, your code is going to be polluted with a styleattribute for every single <option>. If you don't mind that, it's fine. Otherwise, roll your own somehow.
或者，您可以使用非重复background-image并在文本上应用一些填充来实现类似的效果。但是，如果每个<option>图像都具有唯一的图像，那么您的代码将被style每个<option>. 如果你不介意，没关系。否则，以某种方式推出自己的产品。
Referred from : Adding images with option tag
引用自：添加带有选项标签的图像
回答by Tamy
Instead of inserting images you could generate css classes (from the language name or adding a new value only for that) and add the images as background images in your css (using sprites).
您可以生成 css 类（从语言名称或仅为此添加新值）而不是插入图像，并将图像添加为 css 中的背景图像（使用精灵）。
<select ng-model="language_selected">
<option ng-repeat="language in language_list" ng-class="{{ language.name }}" >{{ language.name }}</option>
</select>
For the css sprites I usually use sass with compass.
对于 css 精灵，我通常使用sass 和 compass。
