Слайдер AngularJS - обновление ярлыков с тайм-аутом?

Question

Слайдер AngularJS - обновление ярлыков с тайм-аутом?

0

Я пытаюсь использовать слайдер AngularJS для скольжения по некоторым точкам даты/времени. В частности, я использую тот, у кого есть диапазон перетаскивания, представленная здесь демонстрация - https://jsfiddle.net/ValentinH/954eve2L/

Значения поступают с задней стороны, и их тянут через определенные промежутки времени. Я сохраняю значения даты и времени в массиве dateTimeArray. Я предполагал, что метки (точки даты/времени) на слайдере в пользовательском интерфейсе должны автоматически обновляться, когда значения даты/времени обновляются в dateTimeArray внутри контроллера, но это не так. Любая помощь приветствуется.

HTML

            <rzslider
              rz-slider-model="slider.minValue"
              rz-slider-high="slider.maxValue"
              rz-slider-options="slider.options">
            </rzslider>

JS

                $scope.slider = {

                    minValue: dateTimeArray.length - 10,
                    maxValue: dateTimeArray.length - 5,

                    options: {
                        floor: 0,
                        ceil: dateTimeArray.length - 1, 

                        draggableRange: true,

                        translate: function (value) {
                            return (dateTimeArray[value]);
                        }

                    }
                };

user2217057 22 июль 2016, в 23:49

Источник

Теги:

javascript

angularjs

slider

2 ответа

0

Я удалил свой предыдущий ответ, потому что вы отредактировали вопрос.

Действительно, для вашего варианта использования вы можете напрямую использовать параметр stepsArray который был точно реализован для этой цели. Кроме того, в вашем случае вы можете использовать bindIndexForStepsArray который позволяет вам устанавливать индекс как minValue/maxValue вместо значения массива: http://jsfiddle.net/vphbr1ht/

С другой стороны, с использованием первого метода, который вы использовали, вы должны были вызвать

$scope.$broadcast('rzSliderForceRender')

чтобы заставить ползунок обновиться: http://jsfiddle.net/omhwvozb/.

ValentinH 24 июль 2016, в 08:12

Ещё вопросы

user2217057 · Accepted Answer · 2016-07-24T00-04-00.000Z

Я нашел другой путь для обновления значений ползунка, хотя исходная версия также может иметь решение. Оказалось, что, используя только stepArray в вариантах ползунка вместо перевода, я решил свою проблему. Похоже, что с не числовыми значениями, такими как даты или строки, stepArray автоматически выполняет эту работу, обновляет значения на передней панели, всякий раз, когда сам массив обновляется.

$scope.slider = {

                minValue: dateTimeArray[3], // some min value, for example
                maxValue: dateTimeArray[7], // some max value

                options: {
                    .....
                    stepsArray :dateTimeArray,
                    ........

                    // no need for translate block

                }
            };