Question

仅输入数字：

HTML

    <input type="text" ng-model="employee.age" valid-input  
           input-pattern="[^0-9]+" placeholder="Enter an age" />
    </label> 

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

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

app.directive('validInput', function() {
  return {
    require: '?ngModel',
    scope: {
      "inputPattern": '@'
    },
    link: function(scope, element, attrs, ngModelCtrl) {

      var regexp = null;

      if (scope.inputPattern !== undefined) {
        regexp = new RegExp(scope.inputPattern, "g");
      }

      if(!ngModelCtrl) {
        return;
      }

      ngModelCtrl.$parsers.push(function(val) {
        if (regexp) {
          var clean = val.replace(regexp, '');
          if (val !== clean) {
            ngModelCtrl.$setViewValue(clean);
            ngModelCtrl.$render();
          }
          return clean;
        }
        else {
          return val;
        }

      });

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

为什么上面的angularjs代码如此复杂？使用正则表达式可以使用普通的javascript来输入只有文本输入的数字。

我想知道为什么如此冗长的angularjs代码如此着名？

不能比这更简单吗？

Answer 1

尝试以下方法，希望它的工作原理包括修剪白色空间，

  <input type="text" ng-model="employee.age" 

   ng-pattern="^\d+$/|/[^\s*]/" placeholder="Enter an age" />

仅以角度js

1 个答案: