AngularJS 滑块 - 超时更新标签？

Question

我正在尝试使用 AngularJS 滑块滑过一些 date/time 点。更具体地说，我使用的是具有可拖动范围的那个，此处展示的演示 - https://jsfiddle.net/ValentinH/954eve2L/

这些值来自后端，它们以特定的时间间隔被拉取。我将日期时间值存储在一个数组中 - dateTimeArray。我假设滑块上的标签（date/time 点）在 UI 上应该自动更新，当 date/time 值在控制器内的 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]);
                        }

                    }
                };

Answer 1

我找到了更新滑块值的不同途径，尽管初始版本可能也有解决方案。事实证明，在滑块选项中仅使用 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

                }
            };

Answer 2

我已经删除了我之前的回答，因为你编辑了问题。

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

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

$scope.$broadcast('rzSliderForceRender')

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

AngularJS 滑块 - 超时更新标签？

AngularJS slider - updating labels with timeout?

javascript

slider

angularjs