Sum array of inputs

Question

I have a list of data which when I make the bind I have to call a funcion on keypress event of input (I made my code in angular with this fiddle):

HTML

<div ng-app>
  <div ng-controller="Ctrl">
    <ul>
        <li ng-repeat="item in Data">
            <input ng-model="item.Value" ng-keydown="Total()" />

            </li>
        </ul>
      Total: {{TheTotal}}
  </div>
</div>

ANGULAR

function Ctrl($scope) {
  $scope.Data = [
    {
        Value: 1
    },
    {
        Value: 2
    }];
    $scope.TheTotal= 0;
    $scope.Total = function()
    {
        var returnValue = 0;
        $scope.TheTotal  = 0;       

        for(var i = 0; i < $scope.Data.length; i++)
        {
            returnValue = returnValue + parseInt($scope.Data[i].Value);                  
        }

        $scope.TheTotal =  returnValue;        
    };
}

But what I need is when the value of input changes, then makes the summatory but it is failing because always lost the last key pressed ... Any help ??

Here is the fiddler: Fiddler

you could make it more cleaner using filter rather than putting it inside controller — Pankaj Parkar, Aug 18 '15 at 21:03
so you comment on my post that passing data inside sum isn't neccesary but in your fiddle you do it anyways. also his code works as is? why is his total function changed to sum? — Puzzle84, Aug 18 '15 at 21:09
The question is unclear, fiddle doesn't match code in question. His code in the question would work, but, it's going to be behind one letter due to the event being used. — Kevin B, Aug 18 '15 at 21:11
@KevinB But ... Well, the trouble was that I must not use the ng-keypress event ... But the questios is according with the code ... The other comments helps me to locate the code for works fine ... Any way thanks for the suggestion ... — Freddy Castelblanco, Aug 18 '15 at 21:16

score 2 · Answer 1 · answered Aug 18 '15 at 21:16

Not an unique answer but for code reusability I'll create it as filter so that any other can take use of it

Markup

<body ng-app="app">
  <div ng-controller="myCtrl">
    <ul>
        <li ng-repeat="item in Data">
            <input ng-model="item.Value"/>
        </li>
        </ul>
      Total: {{Data | total: 'Value'}}
  </div>

</body>

Code

.filter('total', function(){
  return function(array, prop){
    var total = 0;
    angular.forEach(array, function(value){
      total = total + parseInt(value[prop]);
    })
    return total;
  }
})

Demo Plunkr

Nice. very elegant solution. – Puzzle84 Aug 21 '15 at 16:35 — Puzzle84, Aug 21 '15 at 16:35

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

As per This thread here

the following will do the trick: http://jsfiddle.net/ygkhh5q5/6/

<div ng-app>
  <div ng-controller="Ctrl">
    <ul>
        <li ng-repeat="item in Data">
            <input ng-model="item.Value" />

            </li>
        </ul>
      Total: {{sum(Data)}}
  </div>
</div>

function Ctrl($scope) {
  $scope.Data = [
    {
        Value: 1
    },
    {
        Value: 2
    }];
    $scope.sum = function(list) {
      var total=0;
      angular.forEach(list , function(item){
        total+= parseInt(item.Value);
      });
      return total;
     }
}

edited May 23 '17 at 12:06

Community

1
1

answered Aug 18 '15 at 21:02

Puzzle84

540
3
20

Why switch to using `sum(Data)` outside of an `ng-` when what he is currently using works and will result in `sum()` being executed less often? – Kevin B Aug 18 '15 at 21:06
@KevinB good point..passing `Data` inside some is not appropriate – Pankaj Parkar Aug 18 '15 at 21:07
Well, the problem for those who want to answer is that OP's fiddle example has different code from what is posted in the question. – Artyom Neustroev Aug 18 '15 at 21:08
Sorry, i didn't notice the discrepancy in the fiddle either. – Kevin B Aug 18 '15 at 21:09

score 0 · Answer 3 · answered Aug 18 '15 at 21:12

The event you are using to update the total is triggering before the value of the input has actually changed. You should instead either use the keyup event, or the change event.

http://jsfiddle.net/ygkhh5q5/12/

<div ng-app>
  <div ng-controller="Ctrl">
    <ul>
        <li ng-repeat="item in Data">
            <input ng-model="item.Value" ng-change="Total()" />

            </li>
        </ul>
      Total: {{TheTotal}}
  </div>
</div>

Sum array of inputs

3 Answers3