CODEWITHSUNDEEP
javascripthtmlangularjs
afzal hussain
afzal hussain

Reputation: 3

Sum more than two fields in angularjs and show the result in another field

I have 5 input number fields, which i want to add. 

<input type="number" id="txtAmount1" ng-model='txtAmount1' value="0.00" /></div>
<input type="number" id="txtAmount2" ng-model='txtAmount2' value="0.00" /></div>
<input type="number" id="txtAmount3" ng-model='txtAmount3' value="0.00" /></div>
<input type="number" id="txtAmount4" ng-model='txtAmount4' value="0.00" /></div>
<input type="number" id="txtAmount5" ng-model='txtAmount5' value="0.00" /></div>

i want to display the sum in the following field

<input type="text" id="txtTotalFx"  value= "{{ parseFloat(txtAmount1) + parseFloat(txtAmount2) + parseFloat(txtAmount3) + parseFloat(txtAmount4) + parseFloat(txtAmount5) }}"   />

while the maincontroler.js contain following code

app.controller("MainController", function($scope){
$scope.txtAmount1 = ""; 
$scope.txtAmount2 = ""; 
$scope.txtAmount3 = ""; 
$scope.txtAmount4 = ""; 
$scope.txtAmount5 = ""; 
$scope.parseFloat = parseFloat;
});

i only get the desired result when all the input fields txtAmount1 to txtAmount5 filled by user i.e. if any of the value is not required to be filled by the user and it remain empty then the sum in the txtTotalFx remains null.

what should i do to make sum = 0 when the form loads while currently when the web form loads the txtTotalFx field shows null.

Upvotes: 0

Views: 5951

Answers (3)

Poyraz Yilmaz
Poyraz Yilmaz

Reputation: 5857

you do not need value for your input cause you alreayd bind them with ng-model.. the chalange here is you want to calculate result when all number is ready so you need to watch other results and the simplest things to do that lift your input models into an array 

$scope.txtAmount = {1 : 0, 2 : 0, 3 : 0, 4 : 0, 5 : 0};

and your html according to your model array

<input type="number" id="txtAmount1" ng-model='txtAmount.1' /></div>
<input type="number" id="txtAmount2" ng-model='txtAmount.2' /></div>
<input type="number" id="txtAmount3" ng-model='txtAmount.3' /></div>
<input type="number" id="txtAmount4" ng-model='txtAmount.4' /></div>
<input type="number" id="txtAmount5" ng-model='txtAmount.5' /></div>

next thing is watch your array

$scope.$watch('txtAmount', function(newValue, oldValue) {...

and put your business logic in there...

I created a plunker for you you can edit it if you want...

PLUNKER

Upvotes: 1

dfsq
dfsq

Reputation: 193271

You can improve readability of your code if you move total value calculation logic to controller. So HTML would be:

<input type="number" id="txtAmount1" ng-model='txtAmount1' /></div>
<input type="number" id="txtAmount2" ng-model='txtAmount2' /></div>
<input type="number" id="txtAmount3" ng-model='txtAmount3' /></div>
<input type="number" id="txtAmount4" ng-model='txtAmount4' /></div>
<input type="number" id="txtAmount5" ng-model='txtAmount5' /></div> 

<input type="text" id="txtTotalFx" ng-value="total()" />

And in controller:

$scope.total = function() {
    var total = parseFloat($scope.txtAmount1 || 0) + parseFloat($scope.txtAmount2 || 0) +
                parseFloat($scope.txtAmount3 || 0) + parseFloat($scope.txtAmount4 || 0) + 
                parseFloat($scope.txtAmount5 || 0);
    return total || 0;
};

Also you don't need value if you use ng-model.

Demo: http://plnkr.co/edit/VdEQDjnES3BjMo8iCxu7?p=preview

Upvotes: 1

Chandermani
Chandermani

Reputation: 42669

parseFloat returns NaN when the float is not defined and hence addition fails.

Create your function parseFloat

$scope.parseFloat=function(val) {
    return isNaN(parseFloat(val)) ? 0: parseFloat(val);
}

Upvotes: 0

Related Questions