Sum values from different ng-repeat Angular js

Question

I want to sum three values from different ng-repeat in my view, this is what I have.

<tr ng-repeat="a in data1">
  <td>a.num1</td>
</tr>
<tr ng-repeat="b in data2">
  <td>b.num2</td>
</tr>
<tr ng-repeat="c in data3">
  <td>c.num3</td>
</tr>
<tr>
  <td>(Here I want to print the sum of the three values)</td>
</tr>

I have this in my controller.

    $scope.data1 = [
        {
          "num1": 1,
        }
    ]
    $scope.data2 = [
         {
           "num2": 2,
         }
    ]

    $scope.data3 = [
        {
           "num3": 3,
        }
   ]

The binding is ok, I print the values coming from each ng-repeat but I need to sum does values and print the result in the last

Some help with this will be great!

could you also please post your angularjs code and some sample data? — Guruprasad J Rao
– Guruprasad J Rao, Commented Jun 21, 2016 at 4:42
Hi, I dont have a fiddle because I cant access from the network Im connected to, I update my question and put the data I have, it's a small example. — kennechu
– kennechu, Commented Jun 21, 2016 at 4:55
You should really just do this in a function in the controller (or better still in a service/factory that deals with fetching the data if it only needs to happen when new data is fetched). When you do things with interpolation {{}} in the view you create a watcher and on every digest the expression in the {{}} is re-evaluated this results in poor performance as you continue to add more watchers and digests are triggered by anything that changes the model and needs to make the view update — shaunhusain
– shaunhusain, Commented Jun 21, 2016 at 4:55

Shwetha · Accepted Answer · 2016-06-21 05:02:45Z

3

In your controller do this :

$scope.sum = $scope.data1[0].num1 + $scope.data2[0].num2 + $scope.data3[0].num3;

And assign the sum in td as below:

<tr><td>{{sum}}</td></tr>

answered Jun 21, 2016 at 5:02

Shwetha

9138 silver badges15 bronze badges

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

1 Comment

Hardik Vaghani Over a year ago

It is not the right way that you set fixed index and get summations.

Bilas Sarker · Accepted Answer · 2016-06-21 05:05:47Z

1

Try this:

//in your controller side added this method

$scope.getTotal = function(){
    var total = 0;
    angular.forEach($scope.data1, function(data1) { 
        total += data1.num1;
    }
    angular.forEach($scope.data2, function(data2) { 
        total += data2.num2;
    }
    angular.forEach($scope.data3, function(data3) { 
        total += data3.num3;
    }
    return total;
}


<td>{{ getTotal() }}</td>//Here is the total value

edited Jun 21, 2016 at 5:05

answered Jun 21, 2016 at 4:57

Bilas Sarker

4593 silver badges10 bronze badges

3 Comments

shaunhusain Over a year ago

Check the docs on ng-init it should only be used for aliasing properties for ng-repeat, this logic should just be done in JS somewhere (controller or some angular provider). I'll remove my down-vote if you get rid of the ng-repeat and set that up in the controller (will switch it to an up-vote), but as is think it's not good advice.

charlietfl Over a year ago

This sort of logic doesn't belong in the view ... it should be done in controller. Doing it in view is horribly inefficient

shaunhusain Over a year ago

@BilasSarker No problem retracted my down-vote and up-voted now... using ng-init or just generally trying to do a lot of logic in expressions is just a bad thing in the long run. Works fine for simple little samples but kills performance on real life apps. Ideally can also use {{::oneTimeDataBinding}} with the two colons if you only care once the value evaluates to something other than undefined (it doesn't change after it's filled).

Durgpal Singh · Accepted Answer · 2016-06-21 05:10:24Z

1

you also can use ng-repeat-start and ng-repeat-end to access value outside ng-repeat

like this

<body ng-app="myApp" ng-controller="MyCtrl">
<h1>Hello Plunker!</h1>

<table>
  <tr ng-repeat-start="a in data1">
      <td>{{a.num1}}</td>
  </tr>
  <tr ng-repeat-start="b in data2">
      <td>{{b.num2}}</td>
  </tr>
  <tr ng-repeat-end>
    <td>{{a.num1 + b.num2}} </td>
  </tr>
  <tr ng-repeat-end></tr>
</table>

for more information ng-repeat-start

answered Jun 21, 2016 at 5:10

Durgpal Singh

12k4 gold badges40 silver badges50 bronze badges

Comments

echopeak · Accepted Answer · 2016-06-21 06:27:02Z

This question may have been already answered but this may help. its more of a design pattern than an answer. it does involve rewriting some of your code.

By organizing data around one object you have more flexibility when it comes to dynamically creating / mutating data.

angular.module('app',[])
.controller('bazContoller',function($scope){

let things = { //controller name or namespace
      enums:{ //enumerable's used by the controller
        data1:[ 
          { "num": 1 }
        ],
        data2:[ 
          { "num": 2 }
        ],
        data3:[ 
          { "num": 67 }
        ]
      },
  
      sum(){
      return Object.keys(this.enums).map(item => this.enums[item])
        .reduce((start ,item)=>start += item[0].num,0);
      }
  }

  Object.assign(this ,things) ; //controller as 
  //$scope['bazContoller'] = things; //$scope
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller='bazContoller as baz'>
    <table>
        <tr ng-repeat="a in baz.enums.data1">
      <td>{{a.num}}</td>
    </tr>
    <tr ng-repeat="b in baz.enums.data2">
      <td>{{b.num}}</td>
    </tr>
    <tr ng-repeat="c in baz.enums.data3">
      <td>{{c.num}}</td>
    </tr>
    <tr>
      <td>SUM: {{baz.sum()}}</td>
    </tr>
    </table>
  
  </div>
</div>

Collectives™ on Stack Overflow

Sum values from different ng-repeat Angular js

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related