angularjs - 如何允许在输入中仅输入数字(数字和小数点)？

Question

如何只允许在文本框中输入有效数字？

例如，用户可以输入“1.25”，但不能输入“1.a”或“1..”。当用户尝试输入下一个字符时，这将使其成为无效数字，他们无法输入。

Answer 1

我写了一个working CodePen example演示过滤数字用户输入的好方法。该指令当前仅允许正整数，但可以轻松更新正则表达式以支持任何所需的数字格式。

我的指令很容易使用:

<input type="text" ng-model="employee.age" valid-number />

该指令非常容易理解:

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) {
        return; 
      }

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

      element.bind('keypress', function(event) {
        if(event.keyCode === 32) {
          event.preventDefault();
        }
      });
    }
  };
});

我想强调将模型引用排除在指令之外非常重要。

希望您觉得这有帮助。

非常感谢Sean Christe和 Chris Grimes 向我介绍了 ngModelController