Question

我想选择下拉选项和相应的图片，任何人都可以帮助我，这是我的代码

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

在这里，我想获得带图像的选项，我想使用纯棱镜，

任何人都可以帮我使用带有角度js的select2 Select2

Answer 1

看看这家伙。他似乎已经为你想要的东西建造了类似的东西 http://yairnevet.blogspot.dk/2013/02/multiple-select-drop-down-list-using.html

编辑：有人向我指出（我现在可以看到，当我看到代码时）他确实使用jquery来实现他自己可以单独使用角度所做的事情。我仍然认为这个例子可以作为一个示范。这里的诀窍不是使用html的默认SELECT标记，而是使用UL标记LI以获得所需的结果。

Answer 2

试试这个，我已经使用了基于纯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;
 }

Answer 3

你可以使用angular-strap select.I相信这比通过select2的令人困惑的文档更好 http://mgcrea.github.io/angular-strap/##selects

Answer 4

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

Answer 5

在 angularjs select option with custom format value

查看示例

Answer 6

选择框内的样式非常有限。您实际上可以不在选择框内使用图像或webfonts。它受浏览器限制。想象一下，如果手机或平板电脑通常具有操作系统的自定义下拉菜单，那将会发生什么事情。

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

https://github.com/jseppi/angular-dropdowns

我在一些项目中使用它，它很容易风格，你可以包括图像和webfonts。

带图像的角度选择选项

6 个答案: