How to sum two fields in AngularJS and show the result in an label?

Question

I have an situation on my page.

I have two inputs and an label in my page. These label have to show the sum of these two inputs value.

So I tried below solution:

Sub-Total
<input type="text" ng-model="Property.Field1" />
Tax
<input type="text" ng-model="Property.Field2" />
Total
<label>{{ Property.Field1 + Property.Field2  }}</label>

At the first time, when the page is totaly loaded, the label shows the sum but when I type some value in any input, these soution gives me a CONCATENATION result of Property.Field1 and Property.Field2, instead of the sum.

so I tried these:

Sub-Total
<input type="text" ng-model="Property.Field1" />
Tax
<input type="text" ng-model="Property.Field2" />
Total
<label>{{ parseFloat(Property.Field1) + parseFloat(Property.Field2)  }}</label>

no sucessful again.

How could I achieve the sum result of two inputs shown in the label?

ndm · Accepted Answer · 2012-10-06T21:01:55.423

56

Have you actually created a parseFloat method in your controller? Because you can't simply use JS in Angular expressions, see Angular Expressions vs. JS Expressions.

function controller($scope)
{
    $scope.parseFloat = function(value)
    {
        return parseFloat(value);
    }
}

edit: it should also be possible to simply set a reference to the original function:

$scope.parseFloat = parseFloat;

I would also expect it to work with filters, but unfortunately it doesn't (might be a bug, or i've misunderstood how filters work):

<label>{{ (Property.Field1|number) + (Property.Field2|number) }}</label>

A workaround would be to use multiplication for casting:

<label>{{ (Property.Field1 * 1) + (Property.Field2 * 1) }}</label>

edited Oct 06 '12 at 21:01

answered Oct 06 '12 at 01:28

ndm

59,784
9
71
110

You're welcome... i've added another way, i don't know why i hadn't thought about it before, setting a reference should do it too. – ndm Oct 06 '12 at 21:03
3

Just fyi standard way of doing it is `value | 0` , asm.js using it, for instance. – vittore Jun 03 '13 at 15:07

Andrea Ligios · Answer 2 · 2015-03-26T14:03:39.220

54

The Columbus's egg is: double negation.

The initial value will be 0 (instead of null), and the result will be a sum (instead of a concatenation, because of the implicit numeric cast).

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

<div ng-app>  
  <input ng-model="first"  placeholder="First number"  type="text" />
  <input ng-model="second" placeholder="Second number" type="text" />
  <h1> Sum: {{first--second}}! </h1>
</div>

edited Mar 26 '15 at 14:03

answered Nov 22 '13 at 14:57

Andrea Ligios

49,480
26
114
243

can u suggest me for divide and multipye as well. – jsduniya Jun 03 '14 at 06:21
3

For **division** and **multiplication**, you can simply use `/` and `*`; the problem with the **sum** was that the `+` was interpreted as a concatenation operator, not as a sum operator... `--` hacks that :) For the multiplication, you can sum 0 to the two operators to prevent a starting null value, for the division you have to think to something else (also for the case of division by 0 when the field is filled with 0): http://jsfiddle.net/AndreaLigios/73gQR/17/ – Andrea Ligios Jun 03 '14 at 08:24
Hi, This works but there is an issue....I have to use ng-model on them to save their values but when I use ng-model, it is not working properly. – Chirag K Apr 13 '16 at 10:26
– Chirag K Apr 13 '16 at 10:28
Define "not working properly". Have you put ng-app on the container ? BTW this works and answers *this* question, if you have other problems you should ask a new question @Stun_Gravy – Andrea Ligios Apr 13 '16 at 11:36
Super answer, it should be best answer!! – Majedur Feb 03 '19 at 12:26

score 10 · Answer 3 · answered Jul 18 '14 at 00:06

10

The easiest and best way to sum two numbers is using HTML5's type="number". If you do this, the inputs' values are, by default, integers.

Updated fiddle

answered Jul 18 '14 at 00:06

user1429980

6,872
2
43
53

score 7 · Answer 4 · answered Jan 16 '15 at 09:51

7

Sum in Angularjs
<div ng-app>
        <input type="text" ng-model="first" />
        <input type="text" ng-model="second" />
        Sum: {{first*1 + second*1}}
</div>

answered Jan 16 '15 at 09:51

Ankit

71
1
1

score 2 · Answer 5 · edited Oct 04 '18 at 16:12

    <!DOCTYPE html>
    <html>
    <head>
     <title>Angular Addition</title>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    </head>
    <body>
     <div ng-app="">
      <p>First Number <input type="number"  ng-model="fnum"></p>
      <p>Second Number <input type="number" ng-model="snum"></p>
      <p>Total {{ (snum) + (fnum) }}</p>
     </div>
    </body>
    </html>

score 1 · Answer 6 · answered Jan 06 '16 at 10:02

Simple method for this :
Js file:
var myApp = angular.module('myApp', []);
myApp.controller("myCtrl", function ($scope) {
    $scope.sum = function (num1, num2) {
        $scope.addition = parseInt(num1) + parseInt(num2);
    }
});


html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" type="text/javascript"></script>

<head>
<script src="script.js" type="text/javascript"></script>
    <title></title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

Enter First Number:<input type="text" id="num1" ng-model="num1" /><br />
Enter Second Number:<input type="text" id="num2" ng-model="num2" /><br />
<input type="button" value="Sum" ng-click="sum(num1,num2)" />
<input type="text" ng-model="addition" />


</div>
</body>
</html>



///.. the textbox in which u want the output just use ng-model there .. as u can see above:..

A code block alone does not provide a good answer. Please add explanations (why it solve the issue, where was the mistake, etc...) — Louis Barranqueiro, Jan 06 '16 at 13:45

score 1 · Answer 7 · answered Apr 20 '19 at 04:32

1

'Sum of Two Number in AngularJs

<input type="number" ng-model="FirstNumber">
<input type="number" ng-model="SecondNumber">
{{FirstNumber+SecondNumber}}

answered Apr 20 '19 at 04:32

Muhammad Fiaz

11
1

score 0 · Answer 8 · answered May 30 '17 at 12:53

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

 <h2>Demo-Sum of two input value </h2>
   <div ng-app="my_firstapp" ng-controller="myfirst_cntrl">
   Number 1 : <input type="text" ng-model="Property.num1" data-ng-init="Property.num1='1'"><br>
   Number 2 : <input type="text" ng-model="Property.num2" data-ng-init="Property.num2='2'"><br>
   Sum of : {{ parseFloat(Property.num1) + parseFloat(Property.num2) }}

 </div>

<script type="text/javascript">
 var app1 = angular.module('my_firstapp', []);
 app1.controller('myfirst_cntrl', function controller($scope) {
  $scope.parseFloat = function(value) {
    return parseFloat(value);
  }
});
</script>
</body>

</html> 
 <p>Output</p>
<p>Sum of : 3</p>

You should not just post some code but rather explain your solution. — hering, May 30 '17 at 13:13

score 0 · Answer 9 · answered Jul 26 '17 at 13:24

0

For Angular (version 2 and above) Try doing something like below

    <p>First Number <input type="number"  [(ngModel)]="fnum"></p>
    <p>Second Number <input type="number" [(ngModel)]="snum"></p>
    <p>Total = {{fnum+snum}}</p>

answered Jul 26 '17 at 13:24

Manit

1,087
11
17

score 0 · Answer 10 · answered Jan 26 '18 at 15:23

0

based on input tag type we can do it in these two ways

based on input tag type we can do it in these two ways:

answered Jan 26 '18 at 15:23

Devashish Priyadarshi

105
7

score 0 · Answer 11 · answered Jul 19 '18 at 05:39

Sub-Total
<input type="text" ng-model="Property.Field1" />
Tax
<input type="text" ng-model="Property.Field2" />
Total
<label>{{ Property.Field1 + Property.Field2  }}</label>

you can use double negation instead of using direct +. This will work if you have type= "number". for type="text" use double negation method. like this

 sum:{{ Property.Field1 -- Property.Field2  }}

score 0 · Answer 12 · answered Jun 22 '21 at 23:50

0

You can use the unary plus operator to cast your variable as a number.

{{ (+count1)+(+count2) }}

answered Jun 22 '21 at 23:50

avantassel

61
1
2

How to sum two fields in AngularJS and show the result in an label?

12 Answers12

Linked