Угловые параметры выбора с изображением [angularjs, select, angularjs-select2]

arrow_upward
2
arrow_downward

Взгляните на этого парня. Кажется, он построил что-то похожее на то, что вы хотите http://yairnevet.blogspot.dk/2013/02/multiple-select-drop-down-list-using.html

РЕДАКТИРОВАТЬ: Мне было указано (и теперь я вижу, когда вижу код), что он действительно использует jquery для достижения того, что он легко мог бы сделать только с угловым. Я все еще думаю, что пример служит демонстрацией. Хитрость здесь заключается не в том, чтобы использовать тег SELECT по умолчанию в html, а вместо этого использовать UL с LI для получения желаемого результата.

Per Hornshøj-Schierbeck 02.06.2014

comment

У этого есть зависимость от jQuery. :( - petur; 02.06.2014

comment

@petur это было источником вдохновения. Вместо этого часть jquery может быть легко изменена на vanilla js... - Per Hornshøj-Schierbeck; 09.09.2016

comment

Спасибо, что нашли время и проверили этот вопрос 2 года спустя. - petur; 10.09.2016

comment

@petur, увидимся снова через пару лет ;) - Per Hornshøj-Schierbeck; 21.09.2016

arrow_upward
2
arrow_downward

Попробуйте это, я использовал проект github iconselect, построенный на чистом javascript, поэтому вы можете добавить его в свой проект и вызвать его из контроллера angular. Проверьте здесь, чтобы увидеть, как это работает. 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;
 }

Javier Abrego 02.06.2014

comment

Спасибо за ваш ответ и объяснение, но я не удовлетворен этим, на самом деле мы можем сделать это с помощью плагина select2 angularjs, к сожалению, я не могу использовать этот ivaynberg.github.io/select2, не могли бы вы помочь мне использовать это - Satish; 16.06.2014

arrow_upward
2
arrow_downward

Вы можете использовать angular-strap select. Я считаю, что это лучше, чем запутанная документация select2 http://mgcrea.github.io/angular-strap/##selects

Raman Singh 01.12.2014

arrow_upward
1
arrow_downward

Мы можем добиться этого, используя шаблоны select2 с angular, select2-ui для angular помогает спроектировать select2-angular

Satish 26.06.2014

arrow_upward
1
arrow_downward

Ознакомьтесь с примером на странице angularjs select с пользовательским значение формата

Lewis Hai 06.11.2015

arrow_upward
0
arrow_downward

Наличие стиля внутри полей выбора очень ограничено. Фактически вы не можете использовать изображения или веб-шрифты внутри полей выбора. Это ограничено из браузера. Представьте, что произойдет, если мобильный телефон или планшет, которые обычно имеют настраиваемый раскрывающийся список ОС, все испортит.

Единственный вариант — использовать пользовательскую директиву, например, angular-dropdowns.

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

Я использовал его в некоторых проектах, и его очень легко стилизовать, и вы можете включать как изображения, так и веб-шрифты.

petur 02.06.2014

Угловые параметры выбора с изображением

Ответы (6)

Вопросы по теме