当ng-model为null或小于最小值时，Angularjs Price滑块超出范围

I have an rz-slider on my page. It is used for getting the price of a product from user. Along with the slider I have two input fields, which is used to store the min and max values. the ng-model for the min and max input fields are same as the rz-slider-model and rz-slider-high respectively.

我的页面上有一个rz滑块。它用于从用户那里获得产品的价格。与滑块一起,我有两个输入字段,用于存储最小值和最大值。最小和最大输入字段的ng模型分别与rz-slider-model和rz-slider-high相同。

The problem is, when ever I change the min or max input field to 0 the slider is going out of range. Is there any way to limit my slider in the specified range?

问题是,当我将最小或最大输入字段更改为0时,滑块超出范围。有没有办法限制我的滑块在指定的范围内?

<input type="number" min="1000" max="5000" ng-model= "priceSlider.min"> to
    <input type="number" min="1000" max="5000" ng-model= "priceSlider.max">
    <rzslider
        rz-slider-floor="priceSlider.floor"
        rz-slider-ceil="priceSlider.ceil"
        rz-slider-model="priceSlider.min"
        rz-slider-high="priceSlider.max"
        rz-slider-step="{{priceSlider.step}}"></rzslider>

See my Plunk for reference.

请参阅我的Plunk以供参考。

1 个解决方案

#1

You can use ng-change directive of angularjs to validate value of min and max.

您可以使用angularjs的ng-change指令来验证min和max的值。

<input type="number" min="1000" max="5000" ng-change="checkMin()" ng-model= "priceSlider.min"> to
<input type="number" min="1000" max="5000" ng-change="checkMax()" ng-model= "priceSlider.max">

Controller:

$scope.checkMin = function() {
    if (typeof $scope.priceSlider.min === 'undefined' || $scope.priceSlider.min < 1000 || $scope.priceSlider.min > 5000) {
      $scope.priceSlider.min = 1000;
    }
  }
  $scope.checkMax = function() {
    if (typeof $scope.priceSlider.max === 'undefined' || $scope.priceSlider.max < 1000 || $scope.priceSlider.max > 5000) {
      $scope.priceSlider.max = 5000;
    }
  }

This option doesn't allow set value by text to say 3000 because when user edit input box, ng-change function called and if value is not in range then set to default value.

此选项不允许按文本设置值来表示3000,因为当用户编辑输入框时,调用ng-change函数,如果值不在范围内,则设置为默认值。

Check plunkr for details.

检查plunkr了解详情。

Other option

Use ng-blur but the issue with ng-blur is if user enter 0 then it allows to set that value and on blur event it set value to default if input is not in valid range.

使用ng-blur但ng-blur的问题是,如果用户输入0,则允许设置该值,如果输入不在有效范围内,则在blur事件中将值设置为默认值。

Choose appropriate based on requirement.

根据要求选择合适的。

#1