javascript - AngularJS - 如果输入不是数字，如何输入数字 0

Question

我希望有 TryParse，但我想 AngularJS 中没有。我尝试使用 angular.isNumber() 。我希望我的程序执行以下操作:用数字 0 替换任何非数字输入。它实际上做了什么:输入框通过不允许写下来来忽略任何非数字的内容。

<script>
    var app = angular.module('BindingsApp', []);

    app.controller('InputCtrl', function($scope) {
        $scope.num3 = 0;
        $scope.edit = function () {

            $scope.num1 = parseInt($scope.num1);
            $scope.num2 = parseInt($scope.num2);

            function isNumeric(num) {
                return !isNaN(num);
            }

            if (!angular.isNumber($scope.num1) ) {
                $scope.num1 = 0;
            }

            if (!angular.isNumber($scope.num2) ) {
                $scope.num2 = 0;
            }

            $scope.num3 = $scope.num1 + $scope.num2;
        };
    });
</script>

<input type="text" ng-model="num1" ng-change="edit()" value="isNumeric(num1)" />
<br />
<input type="text" ng-model="num2" ng-change="edit()" value="{{num2}}" />
<br />
<input type="text" ng-model="num3" ng-change="edit()" value="{{num3}}" />
<br />

Answer 1

最简单的方法就是更换

<input type="text" ng-model="num1" ng-change="edit()" value="isNumeric(num1)" />
<br />

至

<input type="number" ng-model="num1" ng-change="edit()" />
<br />

type="number" 只允许数值。无需编写任何额外的代码

编辑: 为了将非数字值替换为 0 并允许数字值，这里有一个指令

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

DEMO