Input model changes from Integer to String when changed

Question

Have a kind of price range/rating functionality based on an inputs model. On load, when it's set from the backend, it starts off as an integer, but when you type in it, it changes to a string. Is there any way in Angular to declare the value of an input as integer?

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 = "";
}

Yanik Ceulemans · Accepted Answer · 2014-07-15 08:33:09Z

85

I know I'm late but I figured I'd post this answer as other people might still be searching for alternatives.

You could solve this by using the AngularJS directive linking function. The 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);
            });
        }
    };
});

You would then use this directive on an input element to make sure that any value you enter, gets parsed to an integer. (obviously this example doesn't validate the input to make sure that what was entered is in fact an integer, but you could easily implement this with the use of regular expressions for example)

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

More information about this topic can be found on the AngularJS docs on forms, right around the section of "Custom validation": http://docs.angularjs.org/guide/forms .

Edit: Updated parseInt() call to include the radix 10, as suggested by adam0101

edited Jul 15, 2014 at 8:33

answered Apr 24, 2013 at 8:31

Yanik Ceulemans

1,19010 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Dave Over a year ago

Thanks! This helped with an issue I was having where I had radio buttons with values bound to the same model as a input (type=number).

Sasha Chedygov Over a year ago

Aha! I knew there had to be a less kludgy way to do this than what I've been doing. :) Thanks!

Christopher Marshall Over a year ago

Changing this as the answer since it's reusable and seems like the the right way to do it :} Thanks!

adam0101 Over a year ago

You should include a radix of 10 as in parseInt(viewValue, 10) otherwise a leading zero may give an unexpected value in some browser implementations.

dma_k Over a year ago

The given example pulls NaN to model if the input is empty. Maybe that is desired effect but in most usecases I would expect 0 in the model. The solution is here.

|

pkozlowski.opensource · Accepted Answer · 2013-02-25 17:06:32Z

23

Yes, use input of type number:

<input type="number" name="sellPrice" ...>

answered Feb 25, 2013 at 17:06

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

2 Comments

Christopher Marshall Over a year ago

It's actually a decimal, and the number html5 input doesn't seem to work for it anyway. Thanks though!

Jens Alenius Over a year ago

Does not work in IE 9. The model value will be set as a string for IE9

Christopher Marshall · Accepted Answer · 2013-02-25 17:15:12Z

8

Ended up parsing the model as an integer before my conditional.

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

answered Feb 25, 2013 at 17:15

Christopher Marshall

10.7k10 gold badges57 silver badges95 bronze badges

2 Comments

Sudharshan Over a year ago

It's a decimal so parseFloat($scope.menu.totalPrice) is a better solution

Christopher Marshall Over a year ago

I agree! I think Yaniks solution works perfectly though.

claywhipkey · Accepted Answer · 2017-12-01 18:34:29Z

0

Very similar to the accepted answer from Yanik, except I tried that and it didn't work. This version from the AngularJS documentation is working perfectly for me, though.

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

answered Dec 1, 2017 at 18:34

claywhipkey

9078 silver badges13 bronze badges

Collectives™ on Stack Overflow

Input model changes from Integer to String when changed

4 Answers 4

10 Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related