Angularjs:使用 ng-repeat 在一个循环中汇总数据 [英] Angularjs: summarizing data in one loop with ng-repeat
本文介绍了Angularjs:使用 ng-repeat 在一个循环中汇总数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使 ng-repeat 合理化，以在一个循环中显示和汇总数据.注意:不要带来需要多次循环数据的解决方案.
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.
这是我的 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'
},
]
这是我的 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>
问题是gainSummary() 函数中的console.log 显示循环发生的次数比预期的多.并且不显示总和.有没有人解释一下，或者有什么解决办法?
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?
谢谢
推荐答案
好的，现在我找到了问题所在.这是解决方案.显示数据和汇总数据都发生在一个循环中
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'
},
]
这篇关于Angularjs:使用 ng-repeat 在一个循环中汇总数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
