AngularJS滑块-更新标签超时

AngularJS slider - updating labels with timeout?

本文关键字：标签 超时 更新 滑块 AngularJS      更新时间：2023-09-26

我正在尝试使用AngularJS滑块在一些日期/时间点之间滑动。更具体地说，我使用的是具有可拖动范围的，这里展示的演示-https://jsfiddle.net/ValentinH/954eve2L/

这些值来自后端，并以特定的时间间隔提取。我将日期时间值存储在一个数组-dateTimeArray中。我假设当日期/时间值在控制器内的dateTimeArray中更新时，UI上滑块上的标签（日期/时间点）应该自动更新，但事实并非如此。感谢您的帮助。

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]);
                        }
                    }
                };

我找到了一个不同的路径来更新滑块值，尽管初始版本可能也有解决方案。事实证明，在滑块选项中只使用stepsArray而不是平移，解决了我的问题。似乎对于非数字值，如日期或字符串，stepsArray会自动完成工作，每当数组本身更新时，它都会更新前端的值。

$scope.slider = {
                minValue: dateTimeArray[3], // some min value, for example
                maxValue: dateTimeArray[7], // some max value
                options: {
                    .....
                    stepsArray :dateTimeArray,
                    ........
                    // no need for translate block
                }
            };

我删除了以前的答案，因为你编辑了这个问题。

事实上，对于您的用例，您可以直接使用stepsArray选项，该选项正是为此目的而实现的。此外，在您的情况下，您可能希望使用bindIndexForStepsArray，它使您能够将索引设置为minValue/maxValue，而不是数组值：http://jsfiddle.net/vphbr1ht/

另一方面，对于您使用的第一种方法，您应该调用

$scope.$broadcast('rzSliderForceRender')

要强制滑块刷新：http://jsfiddle.net/omhwvozb/.

相关文章：