我想选择带有相应图像的下拉选项，任何人都可以帮助我， 这是我的代码
<select class="form-control demo-htmlselect"
ng-model="spList"
ng-options="spList.name for spList in spDTOList"
required>
<option disabled selected>Select Option</option>
</select>
这里我想获取图片的选项，我想使用纯 angularjs，
任何人都可以帮助我将 select2 与 angular js 一起使用 Select2
【问题讨论】：
标签： angularjs select angularjs-select2
看看这个人。他似乎已经建立了与您想要的相似的东西 http://yairnevet.blogspot.dk/2013/02/multiple-select-drop-down-list-using.html
编辑：有人向我指出（当我看到代码时我现在可以看到）他确实使用 jquery 来实现他单独使用 angular 可以轻松完成的事情。我仍然认为示例服务器作为演示。这里的技巧不是使用 html 的默认 SELECT 标记，而是使用 LI 设置 UL 的样式以获得所需的结果。
【讨论】：
选择框内的样式非常受限。您实际上可以不在选择框中使用图像或网络字体。它受到浏览器的限制。想象一下，如果手机或平板电脑通常具有操作系统的自定义下拉菜单，将会搞砸一切。
您唯一的选择是使用自定义指令，例如 angular-dropdowns。
https://github.com/jseppi/angular-dropdowns
我在一些项目中使用过它，它的样式非常简单，您可以同时包含图像和网络字体。
【讨论】：
试试这个，我使用了基于纯 javascript 构建的 github iconselect 项目，因此您可以将其添加到您的项目中并从角度控制器调用它。在这里查看它是否正常工作。 http://jsfiddle.net/Vsgyf/1/
HTML：
<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.10.4/angular-0.10.4.js"></script> <script type="text/javascript" src="http://bug7a.github.io/iconselect.js/sample/lib/iscroll.js"></script> <div ng:controller="Ctrl"> <div id="my-icon-select"></div> </div>
JS：
function Ctrl() {
this.list = [
{ name:'SWISS', img:'http://s9.postimage.org/d9t33we17/Swiss.png'},
{name:'UNITED', img:'http://s9.postimage.org/ykqn85w5n/United.png'},
{name:'KLM', img:'http://s9.postimage.org/p7unhshsb/Klm.png'},
{name:'EL AL', img:'http://s18.postimage.org/oi8ndntud/image.gif'},
{name:'Ethiopian', img:'http://s9.postimage.org/hqlg2ks97/image.gif'}
];
iconSelect = new IconSelect("my-icon-select");
var icons = [];
for(var i = 0; i< this.list.length; i++){
icons.push({'iconFilePath': this.list[i].img, 'iconValue':this.list[i].name});
}
iconSelect.refresh(icons);
};
IconSelect.DEFAULT = {};
IconSelect.DEFAULT.SELECTED_ICON_WIDTH = 48;
IconSelect.DEFAULT.SELECTED_ICON_HEIGHT = 48;
IconSelect.DEFAULT.SELECTED_BOX_PADDING = 1;
IconSelect.DEFAULT.SELECTED_BOX_PADDING_RIGHT = 12;
IconSelect.DEFAULT.ICONS_WIDTH = 32;
IconSelect.DEFAULT.ICONS_HEIGHT = 32;
IconSelect.DEFAULT.BOX_ICON_SPACE = 1;
IconSelect.DEFAULT.HORIZONTAL_ICON_NUMBER = 3;
IconSelect.DEFAULT.VECTORAL_ICON_NUMBER = 3;
IconSelect.COMPONENT_ICON_FILE_PATH = "http://bug7a.github.io/iconselect.js/sample/images/control/icon-select/arrow.png";
function IconSelect($$elementID, $$parameters) {
var _icons = [];
var _selectedIndex = -1;
var _boxScroll;
var _default = IconSelect.DEFAULT;
function _init() {
//parametreler boÅŸ gelirse
if(!$$parameters) $$parameters = {};
if(_View.setIconSelectElement($$elementID)){
//set parameters
$$parameters = _Model.checkParameters($$parameters);
//create UI
var ui = _View.createUI($$parameters, $$elementID);
_View.iconSelectElement.onclick = function(){
_View.showBox();
};
_View.showBox(false);
_View.iconSelectElement.addEventListener('click', function($event){
$event.stopPropagation();
});
window.addEventListener('click', function(){
_View.showBox(false);
});
}else{
alert("Element not found.");
}
}
this.refresh = function($icons){
_icons = [];
var setSelectedIndex = this.setSelectedIndex;
for(var i = 0; i < $icons.length; i++){
$icons[i].element = _View.createIcon($icons[i].iconFilePath, $icons[i].iconValue, i, $$parameters);
$icons[i].element.onclick = function(){
setSelectedIndex(this.childNodes[0].getAttribute('icon-index'));
};
_icons.push($icons[i]);
}
var horizontalIconNumber = Math.round(($icons.length) / $$parameters.vectoralIconNumber);
_View.boxElement.style.height = (($$parameters.iconsHeight + 2) * horizontalIconNumber) +
((horizontalIconNumber + 1) * $$parameters.boxIconSpace);
this.setSelectedIndex(0);
};
//icon listesini al.
this.getIcons = function(){ return _icons; };
//iconu seçili hale gelir.
this.setSelectedIndex = function($index){
var icon;
if(_icons.length > $index)
icon = _icons[$index];
if(icon){
if(_selectedIndex != -1) _icons[_selectedIndex].element.setAttribute('class','icon');
_selectedIndex = $index;
_View.selectedIconImgElement.setAttribute('src', icon.iconFilePath);
if(_selectedIndex != -1) _icons[_selectedIndex].element.setAttribute('class','icon selected');
}
_View.iconSelectElement.dispatchEvent(new Event('changed'));
};
this.getSelectedIndex = function(){ return _selectedIndex; };
this.getSelectedValue = function(){ return _icons[_selectedIndex].iconValue };
this.getSelectedFilePath = function(){ return _icons[_selectedIndex].iconFilePath };
//### VIEW CLASS ###
function _View(){}
_View.iconSelectElement;
_View.boxElement;
_View.boxScrollElement;
_View.selectedIconImgElement;
_View.selectedIconElement;
_View.showBox = function($isShown){
if($isShown == null) {
$isShown = (_View.boxElement.style.display == "none") ? true : false;
}
if($isShown) {
_View.boxElement.style.display = "block";
_View.boxScrollElement.style.display = "block";
_boxScroll = (_boxScroll) ? _boxScroll : new iScroll($$elementID + "-box-scroll");
}else{
_View.boxElement.style.display = "none";
_View.boxScrollElement.style.display = "none";
}
_View.boxElement.style.display = ($isShown) ? "block" : "none";
};
_View.setIconSelectElement = function($elementID){
_View.iconSelectElement = document.getElementById($elementID);
return _View.iconSelectElement;
};
_View.clearUI = function(){
_View.iconSelectElement.innerHTML = "";
};
_View.clearIcons = function(){
_View.boxElement.innerHTML = "";
};
_View.createUI = function($parameters){
/* HTML MODEL
<div id="my-icon-select" class="icon-select">
<div class="selected-box">
<div class="selected-icon"><img src="images/icons/i2.png"></div>
<div class="component-icon"><img src="images/control/icon-select/arrow.png"></div>
<div class="box">
<div class="icon"><img src="images/icons/i1.png"></div>
<div class="icon selected"><img src="images/icons/i2.png"></div>
<div class="icon"><img src="images/icons/i3.png"></div>
<div class="icon"><img src="images/icons/i4.png"></div>
<div class="icon"><img src="images/icons/i3.png"></div>
<div class="icon"><img src="images/icons/i4.png"></div>
<div class="icon"><img src="images/icons/i5.png"></div>
<div class="icon"><img src="images/icons/i6.png"></div>
<div class="icon"><img src="images/icons/i7.png"></div>
<div class="icon"><img src="images/icons/i8.png"></div>
</div>
</div>
</div>
*/
_View.clearUI();
_View.iconSelectElement.setAttribute('class', 'icon-select');
var selectedBoxElement = document.createElement('div');
selectedBoxElement.setAttribute('class' ,'selected-box');
var selectedIconElement = document.createElement('div');
selectedIconElement.setAttribute('class' ,'selected-icon');
_View.selectedIconImgElement = document.createElement('img');
_View.selectedIconImgElement.setAttribute('src', '');
selectedIconElement.appendChild(_View.selectedIconImgElement);
var componentIconElement = document.createElement('div');
componentIconElement.setAttribute('class', 'component-icon');
var componentIconImgElement = document.createElement('img');
componentIconImgElement.setAttribute('src', IconSelect.COMPONENT_ICON_FILE_PATH );
componentIconElement.appendChild(componentIconImgElement);
_View.boxScrollElement = document.createElement('div');
_View.boxScrollElement.setAttribute('id',$$elementID + "-box-scroll");
_View.boxScrollElement.setAttribute('class', 'box');
_View.boxElement = document.createElement('div');
_View.boxScrollElement.appendChild(_View.boxElement);
_View.selectedIconImgElement.setAttribute('width', $parameters.selectedIconWidth);
_View.selectedIconImgElement.setAttribute('height', $parameters.selectedIconHeight);
selectedIconElement.style.width = $parameters.selectedIconWidth;
selectedIconElement.style.height = $parameters.selectedIconHeight;
selectedBoxElement.style.width = $parameters.selectedIconWidth + $parameters.selectedBoxPadding + $parameters.selectedBoxPaddingRight;
selectedBoxElement.style.height = $parameters.selectedIconHeight + ($parameters.selectedBoxPadding * 2);
selectedIconElement.style.top = $parameters.selectedBoxPadding;
selectedIconElement.style.left = $parameters.selectedBoxPadding;
componentIconElement.style.bottom = 4 + $parameters.selectedBoxPadding;
_View.boxScrollElement.style.left = parseInt(selectedBoxElement.style.width) + 1;
_View.boxScrollElement.style.width = (($parameters.iconsWidth + 2) * $parameters.vectoralIconNumber) +
(($parameters.vectoralIconNumber + 1) * $parameters.boxIconSpace);
_View.boxScrollElement.style.height = (($parameters.iconsHeight + 2) * $parameters.horizontalIconNumber) +
(($parameters.horizontalIconNumber + 1) * $parameters.boxIconSpace);
_View.boxElement.style.left = _View.boxScrollElement.style.left;
_View.boxElement.style.width = _View.boxScrollElement.style.width;
_View.iconSelectElement.appendChild(selectedBoxElement);
selectedBoxElement.appendChild(selectedIconElement);
selectedBoxElement.appendChild(componentIconElement);
selectedBoxElement.appendChild(_View.boxScrollElement);
var results = {};
results['iconSelectElement'] = _View.iconSelectElement;
results['selectedBoxElement'] = selectedBoxElement;
results['selectedIconElement'] = selectedIconElement;
results['selectedIconImgElement'] = _View.selectedIconImgElement;
results['componentIconElement'] = componentIconElement;
results['componentIconImgElement'] = componentIconImgElement;
return results;
};
_View.createIcon = function($iconFilePath, $iconValue, $index, $parameters){
var iconElement = document.createElement('div');
iconElement.setAttribute('class', 'icon');
iconElement.style.width = $parameters.iconsWidth;
iconElement.style.height = $parameters.iconsHeight;
iconElement.style.marginLeft = $parameters.boxIconSpace;
iconElement.style.marginTop = $parameters.boxIconSpace;
var iconImgElement = document.createElement('img');
iconImgElement.setAttribute('src', $iconFilePath);
iconImgElement.setAttribute('icon-value', $iconValue);
iconImgElement.setAttribute('icon-index', $index);
iconImgElement.setAttribute('width', $parameters.iconsWidth);
iconImgElement.setAttribute('height', $parameters.iconsHeight);
iconElement.appendChild(iconImgElement);
_View.boxElement.appendChild(iconElement);
return iconElement;
};
//### MODEL CLASS ###
function _Model(){}
//TODO: params değişkenini kaldır yeni oluştursun.
_Model.checkParameters = function($parameters){
$parameters.selectedIconWidth = ($parameters.selectedIconWidth) ? $parameters.selectedIconWidth : _default.SELECTED_ICON_WIDTH;
$parameters.selectedIconHeight = ($parameters.selectedIconHeight) ? $parameters.selectedIconHeight : _default.SELECTED_ICON_HEIGHT;
$parameters.selectedBoxPadding = ($parameters.selectedBoxPadding) ? $parameters.selectedBoxPadding : _default.SELECTED_BOX_PADDING;
$parameters.selectedBoxPaddingRight = ($parameters.selectedBoxPaddingRight) ? $parameters.selectedBoxPaddingRight : _default.SELECTED_BOX_PADDING_RIGHT;
$parameters.iconsWidth = ($parameters.iconsWidth) ? $parameters.iconsWidth : _default.ICONS_WIDTH;
$parameters.iconsHeight = ($parameters.iconsHeight) ? $parameters.iconsHeight : _default.ICONS_HEIGHT;
$parameters.boxIconSpace = ($parameters.boxIconSpace) ? $parameters.boxIconSpace : _default.BOX_ICON_SPACE;
$parameters.vectoralIconNumber = ($parameters.vectoralIconNumber) ? $parameters.vectoralIconNumber : _default.VECTORAL_ICON_NUMBER;
$parameters.horizontalIconNumber = ($parameters.horizontalIconNumber) ? $parameters.horizontalIconNumber : _default.HORIZONTAL_ICON_NUMBER;
return $parameters;
};
_init();
}
CSS：
.icon-select{
width:0px;
}
.icon-select .selected-box {
position: relative;
margin: 0px;
padding: 0px;
width: 70px; /* sil */
height: 60px; /* sil */
border: 1px solid #999999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.icon-select .selected-box:hover {
position: relative;
margin: 0px;
padding: 0px;
width: 70px; /* sil */
height: 60px; /* sil */
border: 1px solid #000000;
background-color: #FFFFFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.icon-select .selected-icon {
position: absolute;
margin: 0px;
padding: 0px;
top:5px;
left:5px;
width: 48px; /* sil */
height: 48px; /* sil */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.icon-select .component-icon{
position: absolute;
bottom:5px;
right:4px;
}
.icon-select .box {
position: absolute;
top:0px;
left:71px;
margin: 0px;
padding: 0px;
width: 170px; /* sil */
height: 170px; /* sil */
border: 1px solid #EEEEEE;
background-color: #EEEEEE;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow:auto;
/*
-webkit-overflow-scrolling: touch;
*/
}
.icon-select .icon {
position: relative;
margin: 5px 0px 0px 5px;
padding: 0px;
width: 48px; /* sil */
height: 48px; /* sil */
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow:hidden;
float: left;
}
.icon-select .icon:hover {
border: 1px solid #000000;
}
.icon-select .icon.selected {
position: relative;
margin: 5px 0px 0px 5px;
padding: 0px;
width: 48px; /* sil */
height: 48px; /* sil */
border: 1px solid #EEEEEE;
background-color: #EEEEEE;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow:hidden;
float: left;
}
【讨论】：
我们可以使用带有角度的select2模板来实现这一点，select2-ui for angular有助于设计select2-angular
【讨论】：
您可以使用 angular-strap select。我相信这比阅读令人困惑的 select2 文档要好 http://mgcrea.github.io/angular-strap/##selects
【讨论】：
【讨论】：