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!
4 answers
solution1
3 2016-06-21 05:02:45
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>
solution2
1 ACCPTED 2016-06-21 04:57:00
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
solution3
1 2016-06-21 05:10:24
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
solution4
1 2016-06-21 06:27:02
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.