angularjs - 如何在 Angular JS 的 ng-repeat 中创建小计
问题描述
我只是在学习 AngularJS,需要在下面创建报告。我的所有细节线都运行良好,但不知道如何创建小计线。
细线...
<tr data-ng-repeat-start="t in testReferrers">
<td>{{t.ReferrerName}}</td>
<td>{{t.AddressLine1}}}</td>
<td>{{t.DatePlaced | date:'MM/dd/yyyy'}}</td>
<td>{{t.InvoiceNumber }}</td>
<td>{{t.InvoiceAmountLessDiscount | currency : $ : 2 }}</td>
</tr>
我第一次尝试小计行,但我不知道如何计算 {{subTotal}} 以及如何控制该行何时出现。我需要一个分组和分组页脚功能,但不知道如何在 AngularJS 中做到这一点。我打算使用 JQuery 来查找 subTotalRow 并显示或隐藏...
<tr id="subtotalRow" data-ng-repeat-end style="display:none">
<td colspan=3></td>
<td style="border-top: solid 1px #000000">Total:</td>
<td style="border-top: solid 1px #000000">{{subTotal | currency : $ : 2 }}</td>
</tr>
想要的输出...
解决方案
angular.module('app', []).controller('ctrl', function($scope){
$scope.data = [
{Referrer: 'Henry', Amount: 20, Location: 'NY'},
{Referrer: 'Tom', Amount: 10, Location: 'London'},
{Referrer: 'Sam', Amount: 10, Location: 'Paris'},
{Referrer: 'Henry', Amount: 10, Location: 'NY'},
{Referrer: 'Tom', Amount: 20, Location: 'London'},
{Referrer: 'Henry', Amount: 30, Location: 'NY'}
];
$scope.sum = function(name){
return $scope.data.filter(function(x) { return x.Referrer == name; })
.map(function(x) { return x.Amount; }).reduce(function(a, b) { return a + b; });
}
})
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.totalRow{
border-style: solid;
}
.total{
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js">
</script>
<div ng-app='app' ng-controller='ctrl'>
<table>
<thead>
<tr>
<th>Referrer</th>
<th>Location</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-init='next = $index + 1' ng-repeat-start='item in dataSorted = (data | orderBy : "Referrer")'>
<td>{{item.Referrer}}</td>
<td>{{item.Location}}</td>
<td>{{item.Amount}}</td>
</tr>
<tr class='totalRow' ng-repeat-end ng-if='!dataSorted[next] || (dataSorted[next].Referrer != item.Referrer)'>
<td colspan='2' class='total'>Total:</td>
<td>{{sum(item.Referrer)}}</td>
</tr>
</tbody>
</table>
</div>
推荐阅读
- python - 数据框中的 Python DateDiff
- wpf - 用户控件基类的可见性/绑定问题
- c++ - 下一个回文生成器
- sql - SQLSTATE [42000]:语法错误或访问冲突:1584 调用存储函数“sphinx_snippets”中的参数不正确
- c# - 如何在 Unity 中启用 MSAA?
- cmake - Clion 上的 SFML 不编译窗口程序
- javascript - 如何在 HTML 中使特定的下拉列表可链接
- android - Android 半透明活动一开始就没有接触
- ansible - 使用 Vagrant 和 Ansible 运行 OpenShift OKD 3.10 - 连接被拒绝
- reactjs - react-scrollable-anchor 无法正常工作