我在我的应用程序中使用MEAN堆栈,将AngularJS作为我的前端。如何在angularjs中对数组值进行总和,实际上我们在一个ng-repeat内部使用了ng-repeat来获取表中的值,然后在250
中获得了Sprice
之类的获取值我希望sprice
的总值与ans= 250
一样。
我们使用了两个ng-repeat来获取表中的sprice
值,因为sprice
位于[数组]的内部。
我们需要计算表中sprice
值的总和。
如果没有数组,我们有过滤功能来计算ng-module值的总数。
其实我们不会'知道如何在ng-repeat中使用resultValue=
。
例如:表中的sprice值为250表示总计值必须为250
,如果sprice值为250且300表示期望答案为550
。
没有array
总计功能:My Plunker
使用array
总计功能:My Plunker
我的控制器:
.filter('sumOfValue', function () {
return function (data, key) {
debugger;
if (angular.isUndefined(data) && angular.isUndefined(key))
return 0;
var sum = 0;
angular.forEach(data,function(v,k){
sum = sum + parseFloat(v[key]);
});
return sum.toFixed(2);
}
})
我的数据:
$scope.orders = [
{
"_id": "5836b64083d9ce0f0078eae8",
"user": {
"_id": "579bdf6123f37f0e00a40deb",
"displayName": "Table 1"
},
"__v": 8,
"total": "1824",
"ordercar": [],
"orderfood": [
{
"qty": "1",
"confirm": "placed",
"sprice": 250,
"price": 250,
"customise": "With Onion,Without Onion",
"name": "Baasha Pizza"
}
],
"phone": null,
"order_source": "",
"comment": "",
"payment_mode": "",
"nop": null,
"rating": null,
"bill": false,
"complete": false,
"laundry": false,
"clean": false,
"roomservice": false,
"napkin": false,
"waiter": false,
"water": false,
"name": "fgg",
"created": "2016-11-24T09:43:28.413Z",
"isCurrentUserOwner": true
}]
我的Html: -
<table ng-table="tableParams" class="table table-bordered ">
<thead>
<tr>
<th rowspan="2">s.no</th>
<th rowspan="2"> sprice </th>
</tr>
</thead>
<tr ng-repeat="order in orders">
<td>{{$index + 1}}</td>
<td ng-repeat="ram in order.orderfood">{{ram.sprice }}</td>
</tr>
<tr>
<td>sum</td>
<td>{{resultValue | sumOfValue:'sprice'}}</td>
</tr>
</table>
*我们期望数组值的总和。
使用过的ng-repeat:
<tr ng-repeat="order in orders">
<td>{{$index + 1}}</td>
<td ng-repeat="ram in order.orderfood">{{ram.sprice }}</td>
答案 0 :(得分:1)
ng-repeat
没有正确循环..我修复了它。检查下面的代码片段,我还添加了一个数组..........让我知道..
var app = angular.module('plunker', []);
app.filter('sumOfValue', function () {
return function (data, key) {
debugger;
if (angular.isUndefined(data) && angular.isUndefined(key))
return 0;
var sum = 0;
angular.forEach(data,function(v,k){
sum = sum + parseFloat(v[key]);
});
return sum.toFixed(2);
}
}).controller('MainCtrl', function($scope) {
$scope.orders = [
{
"_id": "5836b64083d9ce0f0078eae8",
"user": {
"_id": "579bdf6123f37f0e00a40deb",
"displayName": "Table 1"
},
"__v": 8,
"total": "1824",
"ordercar": [],
"orderfood": [
{
"qty": "1",
"confirm": "placed",
"sprice": 250,
"price": 250,
"customise": "With Onion,Without Onion",
"name": "Baasha Pizza"
},
{
"qty": "2",
"confirm": "placed",
"sprice": 250,
"price": 250,
"customise": "With Onion,Without Onion",
"name": "Baasha Pizza"
}
],
"phone": null,
"order_source": "",
"comment": "",
"payment_mode": "",
"nop": null,
"rating": null,
"bill": false,
"complete": false,
"laundry": false,
"clean": false,
"roomservice": false,
"napkin": false,
"waiter": false,
"water": false,
"name": "fgg",
"created": "2016-11-24T09:43:28.413Z",
"isCurrentUserOwner": true
}]
});
&#13;
body {
font-size: 14px;
}
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
td{
padding: 2px;
}
.servicetaxinclusivetrue:before{
color: green!important;
content: "\f00c";
}
.servicetaxinclusivefalse:before{
color: red!important;
content: "\f00d";
}
.servicetaxexclusivetrue:before{
color: green!important;
content: "\f00c";
}
.servicetaxexclusivefalse:before{
color: red!important;
content: "\f00d";
}
&#13;
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
</head>
<body ng-controller="MainCtrl">
<table ng-table="tableParams" class="table table-bordered ">
<thead>
<tr>
<th rowspan="2">s.no</th>
<th rowspan="2"> sprice </th>
</tr>
</thead>
<tbody ng-repeat="order in orders">
<tr ng-repeat="ram in resultValue=(order.orderfood)">
<td>{{$index + 1}}</td>
<td >{{ram.sprice }}</td>
</tr>
<tr>
<td>sum</td>
<td>{{resultValue | sumOfValue:'sprice'}}</td>
</tr>
</tbody>
</table>
</body>
</html>
&#13;
答案 1 :(得分:0)
在这里你可以使用&#34; ng-init&#34;来调用函数,这样angularjs会在执行&#34; ng-repeat&#34;之前调用函数。
在该函数中,您可以执行迭代并计算总数并将其保留在范围变量中以显示它。