AngularJS: Sum of Input values

Question

I have a simple list of inputs bound to a list of items that display nicely. When I change a value in an input, the sum doesn't update??

Example: http://plnkr.co/edit/B7tEAsXSFvyLRmJ5xcnJ?p=preview

Html

<body ng-controller="MainCtrl">
 <div ng-repeat="item in items">
   <p><input type=text value="{{item}}"></p>
 </div>
 Total: <input type=text value="{{sum(items)}}">
</body>

Script

app.controller('MainCtrl', function($scope) {
  $scope.items = [1,2,5,7];

 $scope.sum = function(list) {
  var total=0;
  angular.forEach(list , function(item){
    total+= item;
  });
  return total;
 }

});

Robin Rizvi · Accepted Answer · 2014-06-08 18:28:16Z

Check this fiddle for implementation: http://jsfiddle.net/9tsdv/

The points to take note of:

Use ng-model directive with your input element to allow two-way binding between the item model and the input element
Since ng-repeat creates a child scope and the elements in items array are of primitive type or value type and hence they are copied by value during the first digest cycle and then further any changes made to the input fields are not reflected in the sum because modifications are bound to now present variables in ng-repeat's created child scope. (See other references on scope inheritance for more details)

HTML:

<body ng-controller="MainCtrl">
 <div ng-repeat="item in items">
   <p><input type=text ng-model="item.value"></p>
 </div>
 Total: <input type=text value="{{sum(items)}}">
</body>

Controller code:

app.controller('MainCtrl', function($scope) {
  $scope.items = [ { value: 1 }, { value: 2 }, { value: 5}, { value: 7 } ];

 $scope.sum = function(list) {
  var total=0;
  angular.forEach(list , function(item){
    total+= parseInt(item.value);
  });
  return total;
 }

});

Community · Accepted Answer · 2017-05-23 12:07:37Z

1

<body ng-controller="MainCtrl">
 <div ng-repeat="item in items">
   <p><input type=text ng-model="item"></p>
 </div>
 Total: <input type=text value="{{sum(items)}}">
</body>

You need to use ng-model...What's the difference between ng-model and ng-bind

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Jun 8, 2014 at 18:01

Srinath Mandava

3,4722 gold badges27 silver badges37 bronze badges

2 Comments

Ian Vink Over a year ago

Hmm. I've added a Plunker but the code doesn't 2 way bind, plnkr.co/edit/B7tEAsXSFvyLRmJ5xcnJ?p=preview Could you have a look?

Srinath Mandava Over a year ago

Sorry i was wrong in the sum part that we cant make a ng-model on a function and Robin is right using an array of objects..and I found the reason why my code failed and his worked here: stackoverflow.com/questions/15488342/…

Collectives™ on Stack Overflow

AngularJS: Sum of Input values

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related