web-dev-qa-db-fra.com

ng-model pour le type d'entrée 'nombre' ne fonctionne pas angularjs

J'ai intégré les requirejs avec l'application angulaire .. avant d'intégrer les requirejs,

<input type="number" value="{{cart.quantity}}" ng-model="cart.quantity" />

montrait la valeur dans la zone de saisie.
Mais après l’intégration avec requirejs, la zone de saisie avec type = "numéro" ne me montre pas la valeur .. La zone de saisie avec type = "texte" fonctionne.

Comment puis-je afficher une valeur avec type = "nombre"?

Merci

javascriptangularjsrequirejs
28
Amb

Je viens de rencontrer le même problème et j'ai réussi à le résoudre. Dans mon cas, le modèle est obtenu via un code RESTful $resource et la valeur du montant est fournie sous forme de chaîne dans le champ, ce qui annule la valeur. Afin de résoudre ce problème, j'ai fini par effectuer les opérations suivantes dans mon contrôleur:

$scope.cart = Cart.get(id: $routeParams.id, function(cart){
    cart.quantity = parseFloat(cart.quantity, 10);
});

qui transforme la valeur en float avant de mettre à jour la vue. Un problème que j’ai rencontré est que ma première tentative était de définir $scope.cart.quantity = parseFloat($scope.cart.quantity, 10) immédiatement après le get. Cela ne fonctionnait pas car la valeur avait été écrasée à la fin de l'appel asynchrone à get.

$scope.cart = Cart.get(id: $routeParams.id);
$scope.cart.quantity = parseFloat($scope.cart.quantity, 10); // This won't work

J'espère que cela t'aides.

29
Ruy Diaz

Votre valeur liée est une string pas une number. 

Tout d’abord, vérifiez que votre serveur envoie une number. Si vous utilisez PHP, vous voudrez peut-être utiliser:

json_encode($array, JSON_NUMERIC_CHECK);

Vous pouvez également transformer votre string en int ou float avec Javascript du côté client:

var data = ['1.9', '3']; //these won't be binded to the numbers-only input
data[0] = parseFloat(data[0]); //this will
data[1] = parseInt(data[1]);

Ce n'est pas un bogue, car l'entrée numbers n'accepte que les nombres valides (espérons-le).

Remarque:

J'ai également essayé de lier un ng-value avec un filtre entier mais cela ne fonctionnera pas. Peut-être parce que le ng-model est celui qui est lié lorsque les deux sont trouvés (oui, ils ont le même niveau de priorité).

9
soyuka

Je résous ce problème en utilisant une directive personnalisée:

angular.module('directives').directive('input', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: function(scope, $el, attrs, ngModel) {
      if ($el.get(0).type === 'number') {
        ngModel.$parsers.Push(function(value) {
          return value.toString();
        });

        ngModel.$formatters.Push(function(value) {
          return parseFloat(value, 10);
        });
      }
    }
  }
})

De cette façon, vous n'avez pas besoin de changer de réponse HTTP lorsque les données sont obtenues via une ressource restante.

Restreindre cette directive si nécessaire :)

6
Rafael Motta

la valeur est remplacée par ng-model . Supprimez votre propriété value et votre ng-model remplira l'entrée avec la quantité du panier. 

4
TidharPeer

J'ai ajouté un attribut de nom à l'entrée et cela a commencé à fonctionner

1
Jamie Pate

J'ai eu le même problème (avec un type d'entrée = "plage" en fait) et voici ma solution, en utilisant une directive personnalisée:

app.directive('ngFloat', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, $el, attrs, ngModel) {
        ngModel.$parsers.Push(function(value) {
            return parseFloat(value, 10);
        });

        ngModel.$formatters.Push(function(value) {
            return value.toString();
        });
    }
  };
});

Comme j'ai limité la directive à l'attribut "ngFloat", il est nécessaire de baliser l'entrée comme ceci:

<input ng-float type=.........

J'espère que cela peut aider les futurs visiteurs.

1
Rémi

Si cart.quantity type de données n'est pas Number, cela ne fonctionnera pas.

Votre besoin de 

$scope.cart.quantity = parseFloat($scope.cart.quantity);
1
Harry Young

J'ai trouvé ce lien qui m'a aidé. Il crée une directive chaîne-à-numéro, que vous pouvez attacher aux entrées numériques de la même manière, que Ruy Diaz a montrée: https://docs.angularjs.org/error/ngModel/numfmt

0
Lajos Meszaros

Étrange, dans mon cas, supprimer les attributs min et max du input type="number" a fonctionné pour moi. Je veux dire le ng-model a fonctionné !!

Semble complètement opposé à ce que l'arpit Kumar a affiché ci-dessus.

AngularJS version: 1.6.1

0
Mr_Green
angular
  .module('xxx')
  .directive('ngFloat', function () {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, $el, attrs, ngModel) {
        ngModel.$formatters.Push(function (value) {
          return +value
        });
      }
    };
  });
0
zhanghao

J'ai aussi rencontré le même problème et j'ai essayé de trouver une solution complexe pour un débutant Puis une solution à l'ancienne version de angular at https: //. angularjs.org/api/ng/input/input%5Bnumber%5D

selon lequel ng-model accepte une chaîne la solution consiste à définir un 

min

et 

max

valeur lors de l'utilisation du type d'entrée = "nombre"

Cela a fonctionné pour moi et j'espère que cela fonctionnera aussi pour les autres

0
arpit kumar

Votre modèle dans ce cas cart.quantity doit être un nombre et non une chaîne.

0
Memonic