Question

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

值来自后端，它们以特定时间间隔拉动。我将datetime值存储在一个数组中 - 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]);
                        }

                    }
                };

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滑块 - 使用超时更新标签？

2 个答案: