Возможно ли сделать динамический select?

Question

[Сергей]

Есть формы, динамически генерируемые из yii2, количество дропдаун неизвестно.
Возможно ли на angular написать скрипт, который будет брать количество select в json, разбивать их на три столбца (col-md-3)
на экране и подстраивать ширину option под длину максимального слова? И если селект получается длинеe определенного значения, то выделять под него отдельный row.

Не пытаюсь здесь получить решение (скрипт буду на фрилансим заказывать), хочется понять, это вообще делать на angular или где то еще.

Answer 1

[maxaon]

"Возможно ли" - да, можно.
Но если надо только это - то лучше наговнокодить на jQuery. Angular тут как пушкой по воробьям.

Comments

[Сергей]

Спасибо. Просто angular и так используется. Думал, чтобы "лишнего" не подключать.

[maxaon]

Если angular используется - тогда вперед.

Answer 2

[Денис]

Мы наговнокодили такой плагинчик:

(function($) {
    var defaults = {
        columns: 3,
        classname: 'column',
        min: 1,
        colsize: 16
    };


    $.fn.autocolumnlist = function(params) {

        return this.each(function() {
            var options = $.extend({}, defaults, params);
            var els = $(this).children('li');
            var dimension = els.size();

            if (options.columns == 'auto') {
                options.columns = Math.ceil(dimension / options.colsize);
            }

            if (dimension > 0 && options.columns > 1) {
                var elCol = Math.ceil(dimension / options.columns);
                if (elCol < options.min) {
                    elCol = options.min;
                }
                var start = 0;
                var end = elCol;

                for (i = 0; i < options.columns; i++) {
                    // Add "last" class for last column
                    if ((i + 1) == options.columns) {
                        els.slice(start, end).wrapAll('<div class="' + options.classname + ' сlast" />');
                    } else {
                        els.slice(start, end).wrapAll('<div class="' + options.classname + '" />');
                    }
                    start = start + elCol;
                    end = end + elCol;
                }
            }
        });
    };
})(jQuery);

Применяется так:

<ul class="need_to_columns">
    <li></li>
    ...
</ul>

$('.need_to_columns').autocolumnlist({
        columns: 3,
        classname: 'column'
    });

Comments

[Сергей]

Спасибо. Если буду jquery использовать то воспользуюсь. Надо будет только lenght добавить к option, чтобы длинные option не заезжали на другую колонку