Angular Select Options with image - angularjs

Question

I want select drop down option with respective images ,can anyone help me in this ,
here is my code
<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>
Here I want get the options with images, I want to use pure angularjs,
can anyone help me to use select2 with angular js
Select2

Answer 1

Take a look at this guy. He seems to have built something similair to what you want
http://yairnevet.blogspot.dk/2013/02/multiple-select-drop-down-list-using.html
EDIT: It was pointed out to me (and i can see now when i see the code) that he indeed uses jquery to achieve what he easily could have done with angular alone. I still think the example serveres as a demonstration. The trick here is not use the default SELECT tag of html but instead style an UL with LI's to get the desired result.

Answer 2

Try this, i've used github iconselect project built on pure javascript, so you can add it to your project and invoke it from the angular controller. Check here for seeing it working. 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;
}

Answer 3

You could use angular-strap select.I believe thats better than going through the confusing documentation of select2
http://mgcrea.github.io/angular-strap/##selects

Answer 4

We Can achieve this using select2 templating with angular, select2-ui for angular helps to design select2-angular

Answer 5

Checkout a example at angularjs select option with custom format value

Answer 6

Having style inside select boxes is very restricted. You can infact not use images, or webfonts inside select boxes. It is restricted from the browser. Imagine what would happen if a cell-phone or tablet which usually have the OS's custom dropdown, that would screw up everything.
Your only option is to go with a custom directive for example angular-dropdowns.
https://github.com/jseppi/angular-dropdowns
I have used it in some projects and it is fairy easy to style and you can include both images and webfonts.