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?

Answer 1

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>

Answer 2

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>

Answer 3

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