ng-model 在输入类型编号为字符串 AngularJS 时抛出错误

Question

当ng-model的值是"24" (string)而不是24 (number)时，在input[type="number"]上它会抛出以下错误：

错误： [ngModel：numfmt] http://errors.angularjs.org/1.5.8/ngModel/numfmt?p0=24

我尝试将输入设置为如下：

<input class="form-control" type="number" name="HouseNumber"
       ng-model="Number(HouseNumber)" />

但是，这也抛出了一个错误：

错误： [ngModel：非分配] http://errors.angularjs.org/1.5.8/ngModel/nonassign

如何让AngularJS忽略此错误/严格绑定，或将其自动转换为ng-model中的number？

我无法将输入设置为 type="text" .

---

只是为了可视化错误

angular.module("app", [])
.controller("controller", function ($scope) {
  // I cannot simply change this in the actual code to $scope.number = 24;
  $scope.number = "24";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
  <input type="number" ng-model="number"/>
</div>

将输入类型更改为type="text"时，它有效
但是，我无法在实际代码中执行此操作，因为输入应保持数字。

angular.module("app", [])
.controller("controller", function ($scope) {
  // I cannot simply change this in the actual code to $scope.number = 24;
  $scope.number = "24";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
  <input type="text" ng-model="number"/>
</div>

Answer 1

如果无法更改变量的初始化并强制转换字符串，请更改输入。(如果山不来找穆罕默德，那么穆罕默德就一定要去山上(

您需要编写一个覆盖输入功能的指令。我采用了这个小功能，您可以随心所欲地更改您的应用程序：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.x = "24";
});
app.directive('input', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: function(scope, $el, attrs, ngModel) {
      if ($el[0].type === "number") {
        ngModel.$parsers.push(function(value) {
          return Number(value);
        });
        ngModel.$formatters.push(function(value) {
          return parseFloat(value, 10);
        });
      }
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <input type="number" ng-model="x">
</div>

Answer 2

在 Angular 上没有太多经验，但一个简单的parseInt不足以满足您的要求吗？

angular.module("app", [])
.controller("controller", function ($scope) {
  // I cannot simply change this in the actual code to $scope.number = 24;
  $scope.number = parseInt("24", 10);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
  <input type="number" ng-model="number"/>
</div>

Answer 3

输入[type=number]需要一个数值，字段的角度装饰器会键入检查它。您必须将值转换为数字才能使用 input[type=number] 字段。