how to sum inside controller in angularjs

Question

I have few inputs and I want to show total in view. I found one solution here

but I wanna know what is the problem in my code. I am trying to sum inside my controller.

HTML:

<body ng-app = 'trivenapp'>
<div ng-controller = 'mycontroller'>
<input ng-model = 'inputvalue1'></input>
<input ng-model = 'inputvalue2'></input>
<input ng-model = 'inputvalue3'></input>
<span>{{total}}</span>
</div>
</body>

Angular:

var myapp = angular.module('trivenapp',[]);
myapp.controller('mycontroller',function($scope){
$scope.total = ($scope.inputvalue1) + ($scope.inputvalue2) + ($scope.inputvalue3);
});

JSBin: JSBin

Brocco · Accepted Answer · 2014-04-01 15:43:14Z

1

Change total to be a function...

$scope.total = function(){
    return (parseInt($scope.inputvalue1) +
           parseInt($scope.inputvalue2) +
           parseInt($scope.inputvalue3)) || 0;
});

and change your binding to:

<span>{{total()}}</span>

The reason your code isn't working is because you're explicitly setting total to a number, which does not automatically update when the other values update.

edited Apr 1, 2014 at 15:43

answered Apr 1, 2014 at 14:50

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

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

4 Comments

Tom Over a year ago

To add to this, $scope.inputvalue1, 2, and 3 are strings. If you input 5, 6, and 7, you will total() will be "567." Convert them to integers. See jsBin jsBin

Brocco Over a year ago

@Tom thanks for pointing out the parsing, I'd just copied the code from the question for simplicity

Triven Over a year ago

There is still a little issue. The $scope.total is null at the time of page load and hence I am getting 'null' in view but I want either 0 or blank as default in view . Also I get total only after filling in all boxes . Please suggest

Brocco Over a year ago

Updated to handle nulls, if any of them are not a number, then it will be 0, but you can change this to handle null for each one individually so that the sum of [1, 'A', 4] would be 5.

Lajos Veres · Accepted Answer · 2014-04-01 15:06:28Z

1

You should force somehow numbers, and bind the details:

<span>{{1*inputvalue1+1*inputvalue2+1*inputvalue3}}</span>

answered Apr 1, 2014 at 15:06

Lajos Veres

13.7k7 gold badges47 silver badges57 bronze badges

Collectives™ on Stack Overflow

how to sum inside controller in angularjs

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related