angular js adding two numbers issue

Question

I have this code using angular js:

<!DOCTYPE html >
<html>
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script type="text/javascript">
        function TodoCtrl($scope) {
            $scope.total = function () {
                return $scope.x + $scope.y;
            };

        }
    </script>
</head>
<body>
   <div ng-app>
  <h2>Calculate</h2>

  <div ng-controller="TodoCtrl">
    <form>
        <li>Number 1: <input type="text" ng-model="x" /> </li>
        <li>Number 2: <input type="text" ng-model="y" /> </li>
        <li>Total <input type="text" value="{{total()}}"/></li>       
    </form>
  </div>
</div>

</body>
</html>

I am able to do multiplication, division and subtraction but for addition, the code just concatenates the x and y values (i.e. if x = 3 and y = 4, the total is 34 instead of being 7)

What am I doing wrong?

Travis J · Accepted Answer · 2015-12-08 19:40:37Z

22

If that is indeed the case then what is happening is the values that are being passed in for x and y are being treated as strings and concatenated. What you should do is convert them to numbers using parseInt

return parseInt($scope.x) + parseInt($scope.y);

or if you prefer brevity

return $scope.x*1 + $scope.y*1;

edited Dec 8, 2015 at 19:40

answered Mar 26, 2013 at 22:38

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

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

6 Comments

mpora Over a year ago

Isn't that something! Where can I learn more about this kind of brevity?

Travis J Over a year ago

@mpora - Just through poking around I guess. I am not aware of a site that has all of the shortcuts displayed in a list. I got that one from this post about guid's: stackoverflow.com/a/2117523/1026459

mpora Over a year ago

Thanks, I am always looking for brevity.

yonexbat Over a year ago

What I wonder in this sample is, why does angular js know when to call the function total? I attached a debugger and it seems that it polls.

user2391480 Over a year ago

plus has precedence over bit-wise or so it should be: return ($scope.x|0) + ($scope.y|0); i also thought it was the other way around.

|

Ben McCormick · Accepted Answer · 2013-03-26 22:38:23Z

7

You want this:

   return parseFloat($scope.x) + parseFloat($scope.y);

+ overrides string concatenation when you have 2 strings. You'll need to cast them to integers or floats explicitly. -,*,/ will all cast to numbers if possible.

answered Mar 26, 2013 at 22:38

Ben McCormick

25.8k12 gold badges56 silver badges71 bronze badges

1 Comment

Ben McCormick Over a year ago

are they integers? if not that would be why. What doesn't work about parseInt?

indieNik · Accepted Answer · 2016-05-03 10:27:16Z

2

That is because the concatenation has higher precedence over addition operation or the Plus (+) Operator. Since, Minus Operator (-) works just fine , here is a Simple Hack!

<script type="text/javascript">
    function TodoCtrl($scope) {
        $scope.total = function () {
            //Subtracting a Zero converts the input to an integer number
            return (($scope.x - 0) + ($scope.y - 0));
        };

    }
</script>

You could as well do this:

<form>
    <li>Number 1: <input type="text" ng-model="x" /> </li>
    <li>Number 2: <input type="text" ng-model="y" /> </li>
    <li>Total <input type="text" value="{{(x-0) + (y-0)}}"/></li>       
</form>

edited May 3, 2016 at 10:27

answered Dec 9, 2015 at 20:52

indieNik

1344 silver badges12 bronze badges

Comments

visar_uruqi · Accepted Answer · 2014-04-29 18:45:19Z

1

Adding floating numbers in correct way

 $scope.Total = parseFloat($scope.firstValue) + parseFloat($scope.secondValue);
 $scope.Total = parseFloat($scope.Total.toFixed(2));

The $scope.Total now will display correctly in the view if binding with ng-model is applied for example if you have

$scope.firstValue = 10.01;
$scope.firstValue = 0.7;

$scope.Total = parseFloat($scope.firstValue) + parseFloat($scope.secondValue);

The variable $scope.Total will be 10.709999999999999 and this is not correct! Adding with parseFloat will not be enough for a correct value. But if you apply

$scope.Total = parseFloat($scope.Total.toFixed(2));

The value will result correctly: $scope.Total = 10.71

Be careful will floating point numbers in javascript

answered Apr 29, 2014 at 18:45

visar_uruqi

2,4841 gold badge25 silver badges20 bronze badges

1 Comment

Mahesh K Over a year ago

please add demo if possible

Yash · Accepted Answer · 2017-03-13 10:14:57Z

1

Make input type as number, since it is addition operation

<input type="text" ng-model="x" />
<input type="text" ng-model="y" />

answered Mar 13, 2017 at 10:14

Yash

192 bronze badges

Comments

mbokil · Accepted Answer · 2013-08-04 23:22:03Z

0

To add two numbers together I would parse the string for Integers and check for null:

function TodoCtrl($scope) {
    $scope.total = function() {
        var firstNum = parseInt($scope.firstNum) 
        var secondNum = parseInt($scope.secondNum);

        if (!firstNum)
            firstNum = 0;
        if (!secondNum)
            secondNum = 0;

        return firstNum + secondNum;
    }
}

answered Aug 4, 2013 at 23:22

mbokil

3,36035 silver badges23 bronze badges

Comments

user6358162 · Accepted Answer · 2016-05-19 20:29:46Z

0

I advise you to change the type of your input to "number", then, you will not need to parse it, angular will convert it automatically to interger. I did it and it works, without a scope, but only to declare your {{total}}

answered May 19, 2016 at 20:29

user6358162

1

Collectives™ on Stack Overflow

angular js adding two numbers issue

7 Answers 7

6 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

6 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related