如何求 Angularjs 中数组值的总和?

How To Total Sum Inside Of Array Values In Angularjs?

我在我的应用程序中使用 MEAN 堆栈,AngularJS 作为我的前端。如何对 angularjs 中数组值的总和,实际上我们在另一个 ng-repeat 中使用了 ng-repeat 来获取 table 中的值,我得到了 [=15= 这样的获取值] 在 Sprice 中,然后我期望将 sprice 值作为 ans= 250.

的总和

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>

这里可以使用"ng-init"调用函数,这样angularjs会在"ng-repeat"执行前调用函数。

在该函数中,您可以执行迭代并计算总计并将其保存在范围变量中以显示它。

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
}]

});
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";
}
<!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>