CODEWITHSUNDEEP
angularjsselectangularjs-select2
Satish
Satish

Reputation: 537

Angular Select Options with image

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

Upvotes: 2

Views: 32117

Answers (6)

Lewis Hai
Lewis Hai

Reputation: 1214

Checkout a example at angularjs select option with custom format value

enter image description here

Upvotes: 1

Raman Singh
Raman Singh

Reputation: 81

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

Upvotes: 2

Satish
Satish

Reputation: 537

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

Upvotes: 1

Javier Abrego
Javier Abrego

Reputation: 462

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;
 }

Upvotes: 2

Per Hornsh&#248;j-Schierbeck
Per Hornsh&#248;j-Schierbeck

Reputation: 15196

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.

Upvotes: 2

petur
petur

Reputation: 1386

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.

Upvotes: 0

Related Questions