Question

我正在尝试为input制定一个指令来限制1-99之间的值。在同一个输入上，我还有另一个指令，它将值转换为百分比，并且不确定这是否会妨碍它。

该指令很简单（基本上来自Angular网站）：

(function() {
  'use strict';

  angular
    .module('app.model')
    .directive('inputRange', inputRange);

  function inputRange() {
    return {
      require: 'ngModel',
      restrict: 'A',
      link: function(scope, elm, attrs, ctrl) {
        var INTEGER_REGEXP = /^-?\d+$/;
        ctrl.$validators.inputRange = function(modelValue, viewValue) {
          if (ctrl.$isEmpty(modelValue)) {
            // consider empty models to be valid
            return true;
          }

          if (INTEGER_REGEXP.test(viewValue)) {
            // it is valid
            return true;
          }

          // it is invalid
          return false;
        };
      }
    }
  }
});

带有输入字段的html部分（与滑块配对）：

  <form name="form">
    <div sc-slider
        ng-model="vm.baseline"
        min="0.01"
        max="0.99"
        initial="{{vm.baseline}}"
        step="0.01"
        uib-tooltip="The initial estimate of the KIQ's likelihood - prior to any indicator observations."

        tooltip-popup-delay="200"
        tooltip-popup-close-delay="200"
        tooltip-placement="bottom"></div>
    <input to-percent
        input-range
        name="baseline"
        style="text-align:center;"
        type="text"
        min="1"
        max="99"
        class="form-control"
        ng-model="vm.baseline"></input>
    <span ng-show="form.baseline.$error.inputRange">The value is not a valid integer!</span>
    <span ng-show="form.baseline.$error.min || form.baseline.$error.max">
      The value must be in range 1 to 99!</span>
  </form>

我已经阅读了关于共享输入的指令的优先级，但我认为这不一定是一个问题。但是当我输入一个大于99的值时，我预计下面会出现一个跨度，但是没有任何东西出现。而我的另一条指令一直都很好。任何帮助表示赞赏。

Answer 1

让您的生活更轻松，并在输入元素上使用ng-max和ng-min属性。

范围验证的Angular指令

1 个答案: