ng-ошибка метания модели на номер типа ввода в угловом 1.3

у меня есть поле ввода, которое я хочу, чтобы пользователь ввел число, поэтому я сделал поле ввода с типом="число".

когда я использую его в 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

Я делаю что-то не так здесь или это не о чем беспокоиться? Я бы предпочел не иметь ошибок в моей консоли, когда я пытаюсь отладить другие проблемы

12
angular-ngmodel angularjs html5 javascript

6 ответов

определение pts собственность как number вместо string:

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

добавьте это, чтобы устранить проблему:

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

эта директива будет анализировать строковое значение для любого ввода типа '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);
                });
            }
        }
    };
});
8

удалите кавычки вокруг "10". Angular ожидает число, и вы даете ему строку.

2

является простой ошибкой решения "AngularJS Documentation for numfmt" синтаксического анализа типа 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 );

    }]);
....
2

Привет просто добавьте этот код в приложение.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);
      });
    }
  };
});
0