web-dev-qa-db-fra.com

erreur de projection du modèle ng sur le numéro du type d'entrée dans l'angle 1.3

J'ai un champ de saisie que je veux que l'utilisateur entre un nombre, donc j'ai fait un champ de saisie avec type = "nombre".

Quand je l'utilise en 1.2, je ne reçois aucune erreur

    <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

Cependant, lorsque je l'utilise dans la version 1.3, l'erreur: [ngModel: numfmt] est générée, mais lorsque je mets à jour le nombre, il semble toujours qu'il soit lié à la portée.

    <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

Est-ce que je fais quelque chose de mal ici ou est-ce que c'est rien de grave Je préférerais ne pas avoir les erreurs dans ma console lorsque j'essaye de déboguer d'autres problèmes

javascriptangularjshtml5angular-ngmodel
12
ak85

Définissez la propriété pts comme number au lieu de string:

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

Ajoutez ceci pour résoudre le problème:

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

Cette directive analysera la valeur de chaîne pour toute entrée de type 'numéro'. Ensuite, vous n'obtiendrez aucune erreur:

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
chrmcpn

Supprimez les guillemets autour de "10". Angular attend un nombre et vous lui attribuez une chaîne.

2
jlowcs

Is Easy solution Error "AngularJS Documentation pour numfmt" parse Tapez Int ou 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
Sergio

Bonjour Ajoutez simplement ce code dans 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);
      });
    }
  };
});
0
Er Nilay Parekh