问题
I'm trying to rationalize ng-repeat to display and summarize data in one loop.
Note: DON'T bring solutions which require looping through the data more then one time.
Here is my Ctrl
$scope.summary = {
keren: 0
, r: 0
, sum: 0
, extra: 0
}
$scope.gainSummary = function(obj) {
var k = $scope.summary;
console.log(obj)
if (typeof obj == 'object') {
k.keren += obj.keren;
k.r += obj.r
k.sum += obj.sum
k.extra += obj.extra
} else {
return k;
}
}
$scope.board = [
{
date: '10/11/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
title: 'חודש אוקטובר 2015'
, date: '10/10/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
date: '10/09/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
date: '10/08/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
date: '10/07/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
date: '10/06/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
date: '10/05/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
date: '10/04/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
date: '10/03/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
]
And here is my HTML
<thead>
<tr>
<th>{{local.date}}</th>
<th>{{local.keren}}</th>
<th>{{local.r}}</th>
<th>{{local.sum}}</th>
<th>{{local.extra}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in board" ng-click="state.go('app.silukin', {id: $index})">
<td>{{i.date}}</td>
<td>{{i.keren | currency : "₪ "}}</td>
<td>{{i.r | currency : "₪ "}}</td>
<td>{{i.sum | currency : "₪ "}}</td>
<td>{{i.extra | currency : "₪ "}}</td>
<td style="display:none">{{gainSummary({keren: i.keren, r: i.r, sum: i.sum, extra: i.extra})}}</td>
</tr>
</tbody>
<tfoot>
<tr ng-repeat="k in gainSummary(1)">
<td>{{local.sum}}</td>
<td>{{k.keren}}</td>
<td>{{k.r}}</td>
<td>{{k.sum}}</td>
<td>{{k.extra}}</td>
</tr>
</tfoot>
</table>
The problem is that console.log inside the gainSummary() function shows thet the loop happens more then expected. And the sums are not displayed. Do any one have an explanation, or any solution?
Thanks
回答1:
Ok, Now i found the problem. Here is the solution. Both the displaying data and sumarizing it happens in one loop
HTML
<table>
<thead>
<tr>
<th>{{local.date}}</th>
<th>{{local.keren}}</th>
<th>{{local.r}}</th>
<th>{{local.sum}}</th>
<th>{{local.extra}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in board" ng-click="state.go('app.silukin', {id: $index})">
<td style="display:none" ng-init="gainSummary(i)"></td>
<td>{{i.date}}</td>
<td>{{i.keren | currency : "₪ "}}</td>
<td>{{i.r | currency : "₪ "}}</td>
<td>{{i.sum | currency : "₪ "}}</td>
<td>{{i.extra | currency : "₪ "}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>{{local.sum}}</td>
<td>₪ {{summary.keren}}</td>
<td>₪ {{summary.r}}</td>
<td>₪ {{summary.sum}}</td>
<td>₪ {{summary.extra}}</td>
</tr>
</tfoot>
</table>
JS:
$scope.summary = {
keren: 0
, r: 0
, sum: 0
, extra: 0
};
$scope.gainSummary = function (obj) {
var k = $scope.summary;
if (typeof obj == 'object') {
k.keren += parseInt(obj.keren);
k.r += parseInt(obj.r)
k.sum += parseInt(obj.sum)
k.extra += parseInt(obj.extra)
} else {
return k;
}
}
$scope.board = [
{
title: 'חודש נובמבר 2015'
, date: '10/11/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
title: 'חודש אוקטובר 2015'
, date: '10/10/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
title: 'חודש ספטמבר 2015'
, date: '10/09/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
title: 'חודש אוגוסט 2015'
, date: '10/08/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
title: 'חודש יולי 2015'
, date: '10/07/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
title: 'חודש יוני 2015'
, date: '10/06/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
title: 'חודש מאי 2015'
, date: '10/05/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
title: 'חודש אפריל 2015'
, date: '10/04/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
title: 'חודש מרץ 2015'
, date: '10/03/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
title: 'חודש פברואר 2015'
, date: '10/02/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
title: 'חודש ינואר 2015'
, date: '10/01/2015'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
{
title: 'חודש דצמבר 2014'
, date: '10/12/2014'
, keren: '1026.27'
, r: '133.13'
, sum: '1159.40'
, extra: '14188.07'
},
]
回答2:
You are repeating the whole element. Your gainSummary is inside the element, so it gets repeated for every "i in board" as well.
Or if you are talking about the 2nd ng-repeat in tfoot, then I dont really know what you want to achieve there.
If I read your code properly, then gainSummary(1) returns $scope.summary, which is this:
$scope.summary = {
keren: 0,
r: 0,
sum: 0,
extra: 0
}
So your gainSummary(1) will probably just iterate over all 4 properties of the $scope.summary and your 'k' variable will be set to the value of each of them, which is '0' in all 4 cases.
It is unclear to me, what you want to achieve. If you specify it more exactly, I can try and help.
来源：https://stackoverflow.com/questions/27397431/angularjs-summarizing-data-in-one-loop-with-ng-repeat