angular指令忽略非数字输入

Question

我必须为IE8编写一些代码.我有一个ng-repeat创建一个填充的表:

<input production-qty type="text" class="input-mini" maxlength="3" ng-model="day.qtyA" ui-event="{ blur : 'updateProduction(day)' }" ng-disabled="day.type=='H'">

IE8不会做type = number

我想要一个指令,它将忽略该输入字段上不是数字键的键击....即.... 0 - 9

我不想让用户键入abc并污染模型,然后告诉他们值无效.我宁愿不让他们输入任何首先无效的数据.

Answer 1

HTML:

<input production-qty type="text" maxlength="3" ng-model="qty1">

指示:

app.directive('productionQty', function() {
  return {
    require: 'ngModel',
    link: function (scope, element, attr, ngModelCtrl) {
      function fromUser(text) {
        var transformedInput = text.replace(/[^0-9]/g, '');
        console.log(transformedInput);
        if(transformedInput !== text) {
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
        }
        return transformedInput;  // or return Number(transformedInput)
      }
      ngModelCtrl.$parsers.push(fromUser);
    }
  }; 
});

Plunker

另请参阅输入中ng-model的过滤器.我上面的答案是模仿pkozlowski.opensource的答案.

我查看了ng-pattern,但它没有过滤文本框中显示的内容.它设置$scope.qty1为undefined,但不需要的字符在文本框中可见.

Answer 2

HTML:

<input type="number" name="graduationYear" ng-model="gradYear" only-num>

指示:

directive('onlyNum', function() {
    return function(scope, element, attrs) {

        var keyCode = [8, 9, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110];
        element.bind("keydown", function(event) {
            //console.log($.inArray(event.which,keyCode));
            if ($.inArray(event.which, keyCode) === -1) {
                scope.$apply(function() {
                    scope.$eval(attrs.onlyNum);
                    event.preventDefault();
                });
                event.preventDefault();
            }

        });
    };
});