Javascript ng-model 在 angular 1.3 中的输入类型号上抛出错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28789323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-model throwing error on input type number in angular 1.3
提问by ak85
I have an input field which I want he user to input a number, so I have made an input field with type="number".
我有一个输入字段，我希望用户输入一个数字，所以我创建了一个 type="number" 的输入字段。
When I use it in 1.2 I get no errors
当我在 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
http://codepen.io/anon/pen/dPKgVL
However when I use it in 1.3 I get Error: [ngModel:numfmt] but when i update the number it still seems to get bound to the scope.
但是，当我在 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
http://codepen.io/anon/pen/YPvJro
Am I doing something wrong here or is this nothing to worry about? I would prefer not to have the errors in my console, when I am trying to debug other issues
我在这里做错了什么还是没什么好担心的？当我尝试调试其他问题时，我不希望控制台中出现错误
采纳答案by net.uk.sweet
Define the ptsproperty as a numberinstead of a string:
将pts属性定义为 anumber而不是 a string：
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.person = [
{"name": "Alex","pts": 10}
];
}]);
回答by KyleM
Add this to fix the issue:
添加此以解决问题：
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);
});
}
}
}
}]);
回答by chrmcpn
This directive will parse the string value for any input of type 'number'. Then you will get no errors:
该指令将解析任何类型为“数字”的输入的字符串值。然后你不会得到任何错误：
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);
});
}
}
};
});
回答by Sergio
Is Easy solution Error "AngularJS Documentation for numfmt" parse Type in Int Or Float ;-)
是简单的解决方案错误“numfmt 的 AngularJS 文档”解析类型为 Int 或 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 );
}]);
....
回答by jlowcs
Remove the quotes around "10". Angular is expecting a number, and you're giving it a string.
删除“10”周围的引号。Angular 需要一个数字，而你给它一个字符串。
回答by Er Nilay Parekh
Hello Just add this code in app.js
您好 只需在 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);
});
}
};
});
