Converting Angular ng-model to integer when writing to Firebase

Question

I am using AngularFire for taking inputs and saving them to my Firebase database. Currently, I have an input for entering the price of a service, like so (I am using an input type of "text" instead of "number", since I don't want it to cause problems in older browsers):

<p><input type="text" placeholder="Enter your monthly price here" ng-model="priceMonthly" required/></p>

However, when I write this to my Firebase upon form submission (using the update function), it writes the value $scope.priceMonthly as a string instead of an integer. What's the best way to write this value as an integer instead of a string?

Maxim Shoustin · Accepted Answer · 2013-11-10 20:27:58Z

11

What about type="number", like:

<input type="number" ng-model="myText" name="inputName">

Since you want to make to user write numbers only. The $scope.myText should be the number in this case.

as a side note:

to be sure that you sent integer, print the value on the screen like:

<pre>myText as number: {{priceMonthly|json}}</pre>

if the value is wrapped with quotes - its a string, none - number.

enter image description here

edited Nov 10, 2013 at 20:27

answered Nov 10, 2013 at 20:12

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

2 Comments

ajrskelton Over a year ago

Nice solution, but I am trying to do the same thing with an <option>'s value attribute from a <select> element instead of a plain old <input>. Any idea's for the select?

serge Over a year ago

what if the input type is hidden?

Tomas Danilevicius · Accepted Answer · 2015-08-26 12:23:58Z

1

Just convert it to integer:

var priceMonthly = parseInt($scope.priceMonthly, 10);

edited Aug 26, 2015 at 12:23

Tomas Danilevicius

384 bronze badges

answered Nov 10, 2013 at 20:09

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:32:37Z

For any input type other than "number" (text, range, etc), you could add a $parser to your input, which will cast it's value for you:

angular.module('exampleApp', [])

.controller('ExampleCtrl', function ($scope) {
    $scope.filter = {
        number: 10
    };
})

.directive('castToInteger', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            ngModel.$parsers.unshift(function(value) {
                return parseInt(value, 10);
            });
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="exampleApp">
  <div ng-controller="ExampleCtrl">
      <input type="range" min="1" max="100" ng-model="filter.number" cast-to-integer="true" />
      <p>{{filter | json}}</p>
  </div>
</div>

Another answer on the topic: https://stackoverflow.com/a/16187142/818862

Collectives™ on Stack Overflow

Converting Angular ng-model to integer when writing to Firebase

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related