Question

124

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

rated 0 times [ 128] [ 4] / answers: 1 / hits: 102212 / 12 Years ago, sat, october 6, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

freddiej

Add To Favorites

Follow

Total Points: 294

Total Questions: 95

Total Answers: 97

Location: Saudi Arabia

Member since Sat, Aug 20, 2022

2 Years ago

answered 12 Years ago daja · Accepted Answer

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>