Question

我使用此angular directive仅允许文本框中的数字输入。这是一个jsfiddle：http://jsfiddle.net/vfsHX/673/

这很有效。但是它需要ng model，我的问题是我有一个表格，我在运行中生成，每行都有一个数字字段，我需要使用该指令。

现在由于此行中的每个字段都没有ng模型，因此无效。

请建议。

Answer 1

我认为你的指令与你的模型联系太紧，对于了解模型的指令从来都不是一个好主意，我从How to allow only a number (digits and decimal point) to be typed in an input?

中得出了主要的想法。

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
});

app.directive('validNumber', function() {
   return {
       require: '?ngModel',
       link: function(scope, element, attrs, ngModelCtrl) {
           if(ngModelCtrl) {
              ngModelCtrl.$parsers.push(function(val) {
                //this will stop your from adding inputs that aren't numbers, you can change it to just affect validity
                var clean = val.replace( /[^0-9]+/g, '');
                if (val !== clean) {                     
                  ngModelCtrl.$setViewValue(clean);
                  ngModelCtrl.$render();
                }
                return clean;                  
             });
           }
           else {
               element.bind('keypress', function(event) {
                   //your logic here, not sure if you want to ignore or add or whatever you want to                       do without a model, this is the place
                   var newVal = element.val() + String.fromCharCode(event.keyCode);
                   //check if newVal is ok for your and then set validity
               });
           }
    };
});

另一种方法是仅在$ parsers中进行有效性检查，而不是替换值：

ngModel.$parsers.unshift(function(value) {
         var valid = angular.isNumber(value);
         ngModel.$setValidity('isNumber', valid);
         return valid ? value : undefined;
});

希望这有帮助。

Answer 2

如果限制输入不是问题，并且您支持IE10 +，则可以考虑HTML5号码输入字段（例如<input type="number"/>）

如何创建指令仅仅编号没有ng模型的字段

2 个答案: