web-dev-qa-db-fra.com

Le modèle d'entrée change d'Integer en String lorsqu'il est modifié

Avoir une sorte de fonctionnalité de fourchette de prix/tarification basée sur un modèle d'entrées. Lors du chargement, lorsqu'il est défini à partir du backend, il commence par un entier, mais lorsque vous le tapez, il se transforme en chaîne. Dans Angular, existe-t-il un moyen de déclarer la valeur d'une entrée sous forme d'entier?

HTML:

<input type="text" name="sellPrice" id="sellPrice" class="sell-price" data-ng-model="menu.totalPrice" data-ng-change="updateMenuPriceRange()"required>

JS:

$scope.updateAggregatePricing();

if ($scope.menu.totalPrice === 0) {
    $scope.menuPriceRange = "";
} else if ($scope.menu.totalPrice < 10) {
    $scope.menuPriceRange = "$";
} else if ($scope.menu.totalPrice >= 10 && $scope.menu.totalPrice <= 12.50) {
    $scope.menuPriceRange = "$$";
} else if ($scope.menu.totalPrice >= 12.51 && $scope.menu.totalPrice < 15) {
    $scope.menuPriceRange = "$$$";
} if ($scope.menu.totalPrice >= 15) {
    $scope.menuPriceRange = "$$$$";
} else {
    $scope.menuPriceRange = "";
}
javascriptangularjsinteger
36
Christopher Marshall

Je sais que je suis en retard, mais je me suis dit que je posterais cette réponse, car d'autres personnes pourraient toujours être à la recherche de solutions de rechange.

Vous pouvez résoudre ce problème en utilisant la fonction de liaison de la directive AngularJS . Le code:

var myMod = angular.module('myModule', []);

myMod.directive('integer', function(){
    return {
        require: 'ngModel',
        link: function(scope, ele, attr, ctrl){
            ctrl.$parsers.unshift(function(viewValue){
                return parseInt(viewValue, 10);
            });
        }
    };
});

Vous utiliseriez ensuite cette directive sur un élément d’entrée pour vous assurer que toute valeur que vous entrez sera analysée en un entier. (évidemment, cet exemple ne valide pas l'entrée pour s'assurer que ce qui a été entré est en fait un entier, mais vous pouvez facilement l'implémenter en utilisant des expressions régulières, par exemple)} _

<input type="text" ng-model="model.value" integer />

Vous trouverez plus d’informations sur ce sujet dans la documentation AngularJS sur les formulaires, à proximité de la section "Validation personnalisée": http://docs.angularjs.org/guide/forms .

Edit: Appel parseInt() mis à jour pour inclure la base 10, comme suggéré par adam0101

85
Yanik Ceulemans

Oui, utilisez une entrée de type number:

<input type="number" name="sellPrice" ...>
23
pkozlowski.opensource

Nous avons fini par analyser le modèle comme un entier avant mon conditionnel.

$scope.menu.totalPrice = parseInt($scope.menu.totalPrice, 10);
8
Christopher Marshall

Très similaire à la réponse acceptée de Yanik, sauf que j'ai essayé et que cela n'a pas fonctionné. Cette version de la documentation AngularJS fonctionne parfaitement pour moi, cependant.

.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
claywhipkey