CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Psyche Genie
Psyche Genie

Reputation: 673

calculate the sum of values in ng repeat Angularjs

I am new to Angularjs. I am displaying list of items using ng-repeat. how to calculate the sum of it? is there any simple method to calculate it in html using expression?

name  numberofyears amount interest 
 xxx       2          4000   4%
 yyy       3          3000   10%
 zzz       5          6000    6%

 Total     10        13000   16%

First three rows are from ng repeat.I just want to calculate the total as shown above. Thanks in advance

This is pretty similar to Calculating sum of repeated elements in AngularJS ng-repeat this question. But not exactly. I am trying to calculate using expression since i have many rows

Upvotes: 4

Views: 48284

Answers (3)

Wawy
Wawy

Reputation: 6269

It is possible to do it, but I think this kind of logic is best suited for your controller. Anyhow this is a possible way of achieving what you asked for using ng-init:

 <table ng-init="items.total = {}">
    <tr>
      <td>name</td>
      <td>numberofyears</td>
      <td>amount</td>
      <td>intrest</td>
    </tr>
    <tr ng-repeat="item in items">
      <td>{{item.name}}</td>
      <td ng-init="items.total.numberofyears = items.total.numberofyears + item.numberofyears">{{item.numberofyears}}</td>
      <td ng-init="items.total.amount = items.total.amount + item.amount">{{item.amount}}</td>
      <td ng-init="items.total.interest = items.total.interest + item.interest">{{item.interest}}%</td>
    </tr>
    <tr>
      <td>Total</td>
      <td>{{items.total.numberofyears}}</td>
      <td>{{items.total.amount}}</td>
      <td>{{items.total.interest}}%</td>
    </tr>
 </table>

Upvotes: 18

bmazurek
bmazurek

Reputation: 169

Do the Math in controller, then you can add <tr ng-if="$last"> </tr> In ng-repeat and show the final result

controller e.x - simple one

function sum (object) {
    var data = object;
    var tmpSum

     for (var i in object){
      tmpSum =+ object[i].value;
    }

    $scope.sum = tmpSum 
};

view e.x

<tr ng-if="$last">{{sum}} </tr>

Upvotes: 1

pherris
pherris

Reputation: 17693

As the comments mention - you would sum in your controller and display the summed value after your ng-repeat.

https://docs.angularjs.org/api/ng/directive/ngRepeat

The ngRepeat directive instantiates a template once per item from a collection.

So, ng-repeat is for rendering and would not be the place for business logic.

Upvotes: 1

Related Questions