Question

我正在创建一个指令，我可以选择小数位的长度，并接受仅一个逗号或点，但我面临着实现完美正则表达式的问题。

我的代码：

var decimalLenght = 2;

ngModelCtrl.$parsers.push(function(val) {
  if (angular.isUndefined(val)) {
    var val = '';
  }
  var clean = val.replace(/[^0-9]+(\.[0-9]{1,2})?$/g, '');
  if (val !== clean) {
    ngModelCtrl.$setViewValue(clean);
    ngModelCtrl.$render();
  }
  return clean;
});

实际上正则表达式不允许我插入点或逗号，也允许输入超过小数位数的限制。

Answer 1

好的，你在正则表达式中有一个非常小的问题（在第一个＆＃34; [＆＃34;）之后你有字符串锚点（^）的开头，而你没有检查逗号... < / p>

/^[0-9]+([.,][0-9]{1,2})?$/g

从那里开始，因为它需要是动态的，所以最好做

new RegExp("^[0-9]+([.,][0-9]{1," + decimalLength + "})?$", "g");

通过这些更改，并更改检查逻辑，您应该得到类似

的内容

var decimalLenght = 2;

ngModelCtrl.$parsers.push(function(val) {
    if (angular.isUndefined(val)) {
        val = '';
    }

    var check = new RegExp("^[0-9]+([.,][0-9]{1," + decimalLength + "})?$","g");
    if (check.test(val)) {
        return val;
    } else {
         ngModelCtrl.$setViewValue('');
         ngModelCtrl.$render();
         return '';
    }
});

这是我用来检查我的正则表达式http://www.regexr.com/的一个很棒的工具。它有一个非常直观的界面，似乎可以很好地处理逃逸。

Answer 2

您可以使用此directive并根据您的要求设置输入。

这是代码段来演示它：

＆＃13;

angular.module('app', [])
  .controller('mainCtrl', function($scope) {
    $scope.options = [];
    for (var i = 1; i <= 10; i++) {
      $scope.options.push(i);
    }
  })
  .directive('nksOnlyNumber', function() {
    return {
      restrict: 'EA',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        scope.$watch(attrs.ngModel, function(newValue, oldValue) {
          if (newValue) {
            var spiltArray = String(newValue).split("");

            if (attrs.allowNegative == "false") {
              if (spiltArray[0] == '-') {
                newValue = newValue.replace("-", "");
                ngModel.$setViewValue(newValue);
                ngModel.$render();
              }
            }

            if (attrs.allowDecimal == "false") {
              newValue = parseInt(newValue);
              ngModel.$setViewValue(newValue);
              ngModel.$render();
            }

            if (attrs.allowDecimal != "false") {
              if (attrs.decimalUpto) {
                var n = String(newValue).split(".");
                if (n[1]) {
                  var n2 = n[1].slice(0, attrs.decimalUpto);
                  newValue = [n[0], n2].join(".");
                  ngModel.$setViewValue(newValue);
                  ngModel.$render();
                }
              }
            }

            if (spiltArray.length === 0) return;
            if (spiltArray.length === 1 && (spiltArray[0] == '-' || spiltArray[0] === '.')) return;
            if (spiltArray.length === 2 && newValue === '-.') return;

            /*Check it is number or not.*/
            if (isNaN(newValue)) {
              ngModel.$setViewValue(oldValue || '');
              ngModel.$render();
            }
          }
        });
      }
    };
  });

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <form name="form">
    <label for="option">Decimal place: </label>
    <select id="option" ng-options="option for option in options" ng-model="option">
      <option value="">Select the length</option>
    </select>
    <hr>
    <label for="input">Input with decimals: </label>
    <input type="text" id="input" nks-only-number ng-model="input" decimal-upto="{{option}}" required>
    <br>
    <label for="input2">Input without decimals: </label>
    <input type="text" id="input2" nks-only-number ng-model="input2" allow-decimal="false">
  </form>
</body>

</html>

＆＃13;

限制指令中的小数位数

2 个答案: