Angularjs 带图像的角度选择选项

我想选择相应图片的下拉选项，有人能帮我吗， 这是我的密码

<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吗

---

看看这个家伙。他似乎做了一些与你想要的相似的事情

---

编辑：有人向我指出（现在当我看到代码时我可以看到），他确实使用jquery来实现他单独使用angular就可以轻松完成的任务。我仍然认为示例服务器只是一个演示。这里的技巧不是使用html的默认

SELECT

标记，而是使用

LI

设置

UL

的样式，以获得所需的结果。

在选择框中设置样式非常有限。实际上，您不能在选择框中使用图像或webfonts。它受到浏览器的限制。想象一下，如果一部手机或平板电脑通常有操作系统的自定义下拉菜单，那会发生什么，这会把一切搞砸

您唯一的选择是使用自定义指令，例如角度下拉菜单

---

我在一些项目中使用过它，它很容易设计，您可以同时包含图像和网络字体。

试试看，我使用了基于纯javascript构建的github iconselect项目，因此您可以将它添加到项目中，并从angular controller调用它。在这里查看它的工作情况

HTML:

---

我们可以使用带angular的select2模板来实现这一点，select2 ui for angular有助于设计

您可以使用angular strap select。我相信这比浏览select2的混乱文档要好

---

在

---

那个有jQuery依赖项：（@petur这是一个灵感来源。jquery部分可以很容易地修改为vanilla js…感谢您花了2年的时间检查这个问题later@petur几年后再见；）感谢您的回复和解释，但我对此并不满意，事实上我们可以使用select2 angularjs插件，很遗憾我不能用这个，你能帮我用一下吗

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

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();

}      

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