更新Md-Slider上的最小值和最大值显示错误信息

时间:2017-02-03 07:15:56

标签: javascript html angularjs angular-material

我在codepen上有一个非常小的例子。我有一个md滑块,具有绑定的最小值和最大值。我尝试做的下一件事是使用按钮处理程序来更改这些绑定值,还可以更改滑块当前位置。

//Initial setup
$scope.myslider={};
$scope.myslider.min = 100;
$scope.myslider.max =1000;
$scope.myslider.val = 500;

这是我更新最大最大值和选定值的按钮的处理程序

$scope.buttonhandler = function()
{
$scope.myslider.min =0;
$scope.myslider.max =100;
$scope.myslider.val = 5;
};

触发按钮处理程序时,滑块位置偏离最右侧。接近100%,而不是我预期的5%。

我的方法codepen是否有问题。

1 个答案:

答案 0 :(得分:0)

在同一个摘要周期中设置min,max和val似乎会产生一些奇怪的东西。我认为这解决了错误:

$scope.myslider.min = 0;
$scope.myslider.max = 100;
$timeout(function() {
  $scope.myslider.val = 5;
}, 0);

这样,首先设置最小值和最大值,然后在最小值/最大值范围内应用有效值。

这是固定的codepen