Как переделать диапазон в select?

Question

[viktorulyushev]

Есть фильтр с ценой у него есть 2 инпута ,где вводится диапазон от минимального значения до максимального,как переделать чтобы место инпутов был селект ?чтобы туда заносились значения от минимального до максимального


Вот верстка

<div class="ngrs-range-slider">
    <div class="ngrs-inputs">
        <div class="row between-xs middle-xs">
            <div class="col-xs-4">
                <input class="input-small" name="filteredModelMin" type="number" data-ng-model="modelMin" data-ng-keyup="inputChange($event)" data-ng-blur="blurMin()" />
            </div>
            <div class="col-xs-4">
                <div class="ngrs-runner-dash">-</div>
            </div>
            <div class="col-xs-4">
                <input class="input-small" name="filteredModelMax" type="number" data-ng-model="modelMax" data-ng-keyup="inputChange($event)"  data-ng-blur="blurMax()"/>
            </div>
        </div>
    </div>
    <div class="ngrs-runner">
        <div class="ngrs-handle ngrs-handle-min"><i></i></div>
        <div class="ngrs-handle ngrs-handle-max"><i></i></div>
        <div class="ngrs-join cs-bg-10"></div>
    </div>
    <div class="ngrs-value-runner" ng-show="showValues">
        <div class="row between-xs">
            <div>
                <div class="ngrs-value ngrs-value-min"><div data-ng-bind="::min"></div></div>
            </div>
            <div>
                <div class="ngrs-value ngrs-value-max"><div data-ng-bind="::max"></div></div>
            </div>
        </div>
    </div>
</div>

Если сейчас просто поменять input на select то на сайте будет так выводить(это для первого инпута)

<select class="input-small ng-pristine ng-valid ng-not-empty ng-touched" name="filteredModelMin" type="number" data-ng-model="modelMin" data-ng-keyup="inputChange($event)" data-ng-blur="blurMin()"><option value="? number:1000 ?"></option>
</select>

надо я так понимаю с дата атрибутами что то делать?

Comments

[Kostya Gorozhanov]

В select у вас будет выбираться только одно значение?

[viktorulyushev]

Kostya Gorozhanov: нет,диапазон от максимально и минимального, в ::min и ::max как раз эти значения и лежат

[Kostya Gorozhanov]

с одного select? или должно быть по select вместо каждого инпута?

[viktorulyushev]

Kostya Gorozhanov: да,оба одинаковые,в обоих берется значение из ::min и ::max и этот диапазон в селекте можно выбирать,т.е если ::min = 1000 а ::max = 5000 то будут оба селекта от 1000 до 5000

[Kostya Gorozhanov]

Вы не понятно ставите вопрос, если можно просто опишите полностью то что должно получиться, без того что есть сейчас.

[viktorulyushev]

Kostya Gorozhanov: есть свойство какое то ,например цена,у нее есть два поля ввода,типо от стольки то до стольки то,мне же нужно чтобы это были селекты,в которых формируется тоже самое но чтобы я мог выбирать,я в общем с помощью js сделал,но получилось костыльно,но работает

Answer 1

[Kostya Gorozhanov]

plnkr.co/edit/Jf6DyvUJtaEA4Q1hci1c?p=preview примерно так?

Comments

[viktorulyushev]

да так,но будет ли это работать для многих свойств? Вот тут я пытаюсь делать с помощью js ,скрипт срабатывает только для первого свойства с диапазоном,и как видите у каждого свойства свои диапазоны,можно как то сделать чтобы бралось min и max из своих свойств?

[Kostya Gorozhanov]

как то так? plnkr.co/edit/Jf6DyvUJtaEA4Q1hci1c?p=preview

[Kostya Gorozhanov]

viktorulyushev: Вот тут это где?

Вот тут я пытаюсь делать с помощью js ,скрипт срабатывает только для первого свойства с диапазоном,и как видите у каждого свойства свои диапазоны,можно как то сделать чтобы бралось min и max из своих свойств?

[viktorulyushev]

Kostya Gorozhanov: test.saas_97703_ufhohezwjg-the_stil.on-advantshop....
ссылка не прикрепилась

[Kostya Gorozhanov]

Для вас лучше всего будет создать компонент который будет принимать диапазон, шаг и обект в который записивать результат

[viktorulyushev]

Kostya Gorozhanov: а с помощью js это можно добить уже как нибудь?а то я уже хз че делать,как сделать чтобы мой скрипт срабатывал на все диапазоны?

[Kostya Gorozhanov]

viktorulyushev: Вопрос был в том как переделать диапазон с помощью Angular, если я на него ответил, отметьте ответ как решение и дайте линк на вопрос по поводу проблем в вашей реализации с помощью "js" (что то мне подсказывает что вы там jquery балуетесь)

[Kostya Gorozhanov]

viktorulyushev: Вы же понимаете что я сейчас не вижу вашей реализации на js?

[viktorulyushev]

Kostya Gorozhanov: да jquery,ну если открыть код страницы там сверху будет мой скрипт,но крч не прокатит,т.к если диапазон большой и много селектов то сайт тупо виснет,а скрипт такой

var min = $("#q1").text();
var max = $("#q2").text();
min1 = parseInt(min, 10);
max1 = parseInt(max, 10);
for (var i = min1; i < max1; i += 10000)
{ $("#minim2").append($('<option value="' + i + '">' + i + '</option>')) }

получаю из ::min и ::max значения и по циклу пускаю,но сайт тупо зависает.В общем нужно делать как то через angular можете сказать как сделать чтобы для отдельного свойства расчитывался исходя из его min и max?ответ я лучшим отмечу конечно же

[Kostya Gorozhanov]

viktorulyushev: Я же отправлял этот линк - plnkr.co/edit/Jf6DyvUJtaEA4Q1hci1c?p=preview
там можно просто сделать вот так

vm.otherSelect = new PriceSelect([3,5,3,2,35,67,43,2,34])

и затем в html можно добавить

<select ng-model="vm.otherSelect.limit.from" 
            ng-options="value for value in vm.otherSelect.fromValues" 
            ng-change="vm.calculateValues(vm.otherSelect)"></select>
    <select ng-model="vm.otherSelect.limit.to" 
            ng-options="value for value in vm.otherSelect.toValues" 
            ng-change="vm.calculateValues(otherSelect)"></select>

[Kostya Gorozhanov]

Вот - plnkr.co/edit/Jf6DyvUJtaEA4Q1hci1c?p=preview
Обновил plunker, теперь все реализовано отдельным компонентом, надеюсь с этим уже разберетесь.
Удачи вам!