angular 1.3 中输入类型编号的 ng-model 抛出错误

Question

我有一个输入字段，我希望他的用户输入一个数字，所以我制作了一个类型为 "number" 的输入字段。

当我在 1.2 中使用它时，我没有收到任何错误

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('MainCtrl', ['$scope', function ($scope) {
        $scope.person = [
            {"name": "Alex","pts": "10"}
        ];
    }]);
</script>
<div ng-app="app">
    <div ng-controller="MainCtrl">
        {{person | json }}<br>
        name: <span ng-bind="person[0].name"></span></br>
        <!-- pts: <input ng-model="person[0].pts"> -->
        pts: <input type="number" ng-model="person[0].pts"><br?
    </div>
</div>

http://codepen.io/anon/pen/dPKgVL

然而，当我在 1.3 中使用它时，出现错误：[ngModel:numfmt] 但是当我更新数字时，它似乎仍然绑定到范围。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('MainCtrl', ['$scope', function ($scope) {
        $scope.person = [
            {"name": "Alex","pts": "10"}
        ];
    }]);
</script>
<div ng-app="app">
    <div ng-controller="MainCtrl">
        {{person | json }}<br>
        name: <span ng-bind="person[0].name">
        name: <span ng-bind="person[0].name"></span></br>
        <!-- pts: <input ng-model="person[0].pts"> -->
        pts: <input type="number" ng-model="person[0].pts">
    </div>
</div>

http://codepen.io/anon/pen/YPvJro

我是不是做错了什么或者这没什么好担心的？当我尝试调试其他问题时，我不希望控制台出现错误

Answer 1

将 pts 属性定义为 number 而不是 string:

var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.person = [
        {"name": "Alex","pts": 10}
    ];
}]);

Answer 2

删除“10”两边的引号。 Angular 期待一个数字，而你给它一个字符串。

Answer 3

该指令将解析 'number' 类型的任何输入的字符串值。那么您将不会收到任何错误：

module.directive('input', function(){
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModel){
            if(attrs.type == 'number'){
                ngModel.$formatters.push(function(value){
                    return parseFloat(value);
                });
            }
        }
    };
});

Answer 4

是简单的解决方案错误 "AngularJS Documentation for numfmt" parse Type in Int Or Float ;-)

<input type="number" ng-model="inputNumDemo" />

....
    app.controller('Demo',[ '$scope', function($scope){

      // Input numeric convert String "10" to Int 10 or Float
      $scope.f.inputNumDemo = parseInt(d.data.inputDemo );

    }]);
....

Answer 5

添加此内容以解决问题：

myApp.directive('input', [function() {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function(scope, element, attrs, ngModel) {
            if (
                   'undefined' !== typeof attrs.type
                && 'number' === attrs.type
                && ngModel
            ) {
                ngModel.$formatters.push(function(modelValue) {
                    return Number(modelValue);
                });

                ngModel.$parsers.push(function(viewValue) {
                    return Number(viewValue);
                });
            }
        }
    }
}]);

Answer 6

您好只需在 app.js

中添加此代码

angular.module('numfmt-error-module', [])

.run(function($rootScope) {
  $rootScope.typeOf = function(value) {
    return typeof value;
  };
})

.directive('stringToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(value) {
        return '' + value;
      });
      ngModel.$formatters.push(function(value) {
        return parseFloat(value);
      });
    }
  };
});

angular 1.3 中输入类型编号的 ng-model 抛出错误

ng-model throwing error on input type number in angular 1.3

html

javascript

angularjs

angular-ngmodel