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
– Pankaj Parkar, Commented Aug 18, 2015 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
– Puzzle84, Commented Aug 18, 2015 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. — user400654
– user400654, Commented Aug 18, 2015 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
– Freddy Castelblanco, Commented Aug 18, 2015 at 21:16

Pankaj Parkar · Accepted Answer · 2015-08-18 21:16:27Z

2

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

answered Aug 18, 2015 at 21:16

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

Puzzle84 Over a year ago

Nice. very elegant solution.

Community · Accepted Answer · 2017-05-23 12:06:16Z

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, 2017 at 12:06

CommunityBot

11 silver badge

answered Aug 18, 2015 at 21:02

Puzzle84

5404 silver badges20 bronze badges

4 Comments

user400654 Over a year ago

Why switch to using sum(Data) outside of an ng-<event> when what he is currently using works and will result in sum() being executed less often?

Pankaj Parkar Over a year ago

@KevinB good point..passing Data inside some is not appropriate

Artyom Neustroev Over a year ago

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.

user400654 Over a year ago

Sorry, i didn't notice the discrepancy in the fiddle either.

user400654 · Accepted Answer · 2015-08-18 21:12:18Z

0

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>

answered Aug 18, 2015 at 21:12

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Collectives™ on Stack Overflow

Sum array of inputs

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related