javascript - Angular Directive(指令)忽略非数字输入

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

另请参阅filters on ng-model in an input 。我上面的答案是根据 pkozlowski.opensource 的答案建模的。

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