使用图像进行角度选择

Angular select with images

本文关键字：选择 图像      更新时间：2023-09-26

情况：

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

代码：

在控制器中：

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

问题：

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

编辑：

这是溶液的Plunker，已清理：

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

作为其他答案，您不能使用<options>来添加图像，但您可以使用角度模块ui-select来实现您想要做的事情。

这是一个演示，带有ui select和您的数据。

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

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

 .select2-search {
      display: none;
 }

演示

这对于原生选择元素来说是不可能的

因此，您需要使用其他html元素设计一个选择框&css，

试试这个：

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>

答案：

这根本不可能。

<option>标记允许的内容是具有最终转义字符的Text(如&eacute;(。不允许使用HTML。

有关详细信息，请参阅文档。

解决方案：

使用CSS和HTML制作自定义下拉列表。

这是不可能的，因为<option>只支持文本。

您可能需要使用复杂的HTML/CSS/JavaScript滚动自己的下拉控件。如何做可能在你的问题范围内，也可能不在你的范围内。

或者，您可以使用不重复的background-image并在文本上应用一些填充以实现类似的效果。但是，如果每个<option>都有一个唯一的映像，那么您的代码将被每个<option>的style属性所污染。如果你不介意，那没关系。否则，你自己滚吧。

引用自：添加带有选项标签的图像

您可以生成css类(根据语言名称或仅为此添加新值(，并将图像作为背景图像添加到css中(使用sprite(，而不是插入图像。

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

对于css精灵，我通常使用带有指南针的sass。

相关文章：