ng-model jeter erreur sur l'entrée numéro de type angulaire 1.3

J'ai un champ de saisie qui je veux qu'il à l'utilisateur d'entrer un nombre, donc j'ai fait un champ de saisie avec type="number".

Lorsque je l'utilise dans la 1.2 je n'obtiens pas d'erreurs

    <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 1.3, j'obtiens l'Erreur: [ngModel:numfmt] mais lorsque je mets à jour le nombre il semble toujours se limite à 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

Je fais quelque chose de mal ici ou est-ce rien à craindre? Je préfère ne pas avoir les erreurs dans ma console, quand je suis en train de déboguer d'autres questions

La réponse courte est qu'il prévoit que le nombre 10, mais votre modèle donne de la chaîne "10". Dans l'avenir, l'utilisation non-minifiés Angulaire (supprimer .min) pour voir plus d'élaborer des messages d'erreur

OriginalL'auteur ak85 | 2015-03-01

Définir la pts propriété comme un number au lieu d'un string:

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

OriginalL'auteur net.uk.sweet

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

Ceci est pratique si vous n'avez pas le contrôle complet sur vos JSON modèle (par exemple, le mien avait aussi pour soutenir les chaînes de propriété afin de le changer pour un type entier ne fonctionne pas pour moi).

OriginalL'auteur KyleM

Cette directive va analyser la chaîne de valeur pour une entrée de type "nombre". Ensuite, vous n'aurez pas d'erreurs:

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

OriginalL'auteur chrmcpn

2

Supprimer les guillemets autour de "10". Angulaire, s'attend à un nombre, et que vous lui donnant une chaîne de caractères.

OriginalL'auteur jlowcs

Est la solution Facile d'Erreur "AngularJS Documentation pour numfmt" parse Type en 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 );

    }]);
....

OriginalL'auteur Sergio

Bonjour il suffit d'ajouter 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);
      });
    }
  };
});

OriginalL'auteur Er Nilay Parekh

Vous devez vous connecter pour publier un commentaire.