Question

我花了一些时间来弄清楚这个，但有人可以发布一个更简洁的方法来限制输入类型='数字'中的位数。其中一个问题是，如果$ scope.variable = null，则抛出错误....输入字段中没有任何内容。

<input type="number" model='modalName' ng-change="monitorLength('modalName',16)">

JS：

  $scope.monitorLength = function (model,maxLength) {
    if ($scope[model] != null) {  // prevent error on empty input field
      var len = $scope[model].toString() ;  // convert to a string
      if (len.length > maxLength) {  //evaluate string length
        $scope[model] = parseInt(len.substring(0, maxLength));  
        // convert back to number or warning is thrown on input value not being a number
      }
    }
  }

然后我需要扩展这个以仅考虑数字，防止任何非数字字符包括'。'和'，'符号：

  var reg = new RegExp(/^\d+$/) ;
  $scope.monitorLength = function (modal,maxLength) {
    if ($scope[modal] != null) {
      var len = $scope[modal].toString() ;
      if (len.length > maxLength) {
        $scope[modal] = parseInt(len.substring(0, maxLength));
      } else if (!reg.test(len)) {
        $scope[modal] = parseInt(len.substring(0, len.length-2));
      }
    }
  }

有没有办法提取负责调用ng-change的ng-modal？所以电话只需要是：ng-change="monitorLength(10)"。然后在函数中以某种方式动态检索调用ng-modal？

Answer 1

这是一种更清晰的限制数量的方法，使用ngMaxlength：

<input type="number" model='modalName' ng-maxlength="16">

您可以找到更多属性和信息here

Answer 2

有没有办法提取负责调用ng-change的ng-modal？

是。您可以定义指令并要求ngModelController。

.directive('maxNum', function(){
    return {
        require: '^ngModel',
        link: function($scope, elem, attrs){
            // here you can add formatters/parsers to the ngModel 
            // to affect the change on the ngModel.$viewValue.

        }
    }
})

正如@rolinger在另一个答案中所述，使用内置指令不会阻止使用输入无效字符，它们只是将模型标记为无效。

阻止输入类型编号的maxLength

2 个答案: