Javascript 角度1.3中输入类型编号的ng模型投掷错误

我有一个输入字段，我希望用户输入一个数字，所以我用type=“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>

var-app=angular.module（'app'，[]）；
app.controller（'MainCtrl'，['$scope'，函数（$scope）{
$scope.person=[
{“姓名”：“亚历克斯”，“临时秘书处”：“10”}
];
}]);
{{person | json}}

姓名：

临时秘书处：
临时秘书处：

---

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

将

pts

属性定义为

数字

，而不是

字符串

：

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

---

删除“10”周围的引号。Angular需要一个数字，而您要给它一个字符串。

此指令将解析任何“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);
                });
            }
        }
    };
});

容易解决的错误是“AngularJS Documentation for numfmt”解析类型为Int或Float；-）

....
app.controller（'Demo'，['$scope'，函数（$scope）{
//输入数字，将字符串“10”转换为Int 10或Float
$scope.f.inputNumDemo=parseInt（d.data.inputDemo）；
}]);
....

添加以下内容以解决问题：

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);
                });
            }
        }
    }
}]);

---

您好，请在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);
      });
    }
  };
});

---

简单的回答是，它需要的是数字

10

，但您的模型给它的是字符串

“10”

。将来，使用非缩微的Angular（remove.min）查看更详细的错误消息如果您不能完全控制JSON模型，那么可能的副本非常方便（例如，我的模型还必须支持该属性中的字符串，因此将其更改为整数类型对我来说不起作用）。

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);
                });
            }
        }
    }
}]);

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);
      });
    }
  };
});