如何在Angularjs中计算两个表的Totalsum值？

Question

我在我的应用程序中使用MEAN堆栈，将AngularJS作为我的前端。如何在angularjs中总和两个值，实际上我们有两个表，第一个表用filter:{raised: 'false'}过滤，第二个表用filter:{raised: 'true'}过滤，我们得到{{1}中两个表的总和值那么我希望将commision总计值commision计算为A + B ... My Plunker。

• 我们有两个表，所以我想计算第一个表45 + 19 answer = 64总和值和第二个表commision总计值。

• 这两个表都使用ng-module值进行过滤，例如： - 第一个表格使用commision进行过滤，第二个表格使用filter:{raised: 'false'}进行过滤

• 期望例证： - fisrt表commision为filter:{raised: 'true'}，第二个表commision为45，我们需要计算这些值为第三个表，如19应该是A + B。

• 我已将羽毛作为参考plunker，任何人都知道解决方案可以帮助我们。

我的控制器： -    Commision totalsum过滤器： -

64

我的Html： -

    .filter('totalSumCV', function () {
   return function (data, key1, key2) {        
       if (angular.isUndefined(data) && angular.isUndefined(key1)  && angular.isUndefined(key2)) 
           return 0;

       var sum = 0;
       angular.forEach(data,function(v,k){
           sum = sum + (parseFloat(v[key1]) * parseFloat(v[key2])/100);
       });
       return sum.toFixed(2);
   }
})

我试图计算两个表的commision totalsum值，如： -

<tr ng-repeat="mani in resultValue=(sryarndebitnote |  filter:{raised: 'false'} )">

    <td>A = {{resultValue | totalSumCV:'invoice_value_fob':'percentage_commission'}}</td>

</tr>


  <tr ng-repeat="mani in resultValue=(sryarndebitnote |  filter:{raised: 'true'} )">

    <td>B = {{resultValue | totalSumCV:'invoice_value_fob':'percentage_commission'}}</td>

</tr>

Answer 1

您应该为结果集采用不同的变量来实现此目的，

这是您要求的答案，

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);
    }
}).filter('totalSumCV', function () {
   return function (data, key1, key2) {        
       if (angular.isUndefined(data) && angular.isUndefined(key1)  && angular.isUndefined(key2)) 
           return 0;
       
       var sum = 0;
       angular.forEach(data,function(v,k){
           sum = sum + (parseFloat(v[key1]) * parseFloat(v[key2])/100);
       });
       return sum.toFixed(2);
   }
}).controller('MainCtrl', function($scope) {
  $scope.sryarndebitnote = [
{
"_id": "57ecb2861365a8150a34c660",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 0,
"created": "2016-09-29T06:19:50.046Z",
"shipment_id": "57dc0ad6a752016f1638c6bc",
"raised": false,
"conversion_rate": "62",
"percentage_tds": "10",
"percentage_servicetax": "15",
"percentage_commission": "3",
"invoice_value_fob": "300",
"invoice_value_cif": "50",
"invoice_quantity": "40",
"supplier_name": "asd",
"buyer_name": "Rohit"
},


{
"_id": "57ecb2861365a8150a34c660",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 0,
"created": "2016-09-29T06:19:50.046Z",
"shipment_id": "57dc0ad6a752016f1638c6bc",
"raised": false,
"conversion_rate": "62",
"percentage_tds": "10",
"percentage_servicetax": "15",
"percentage_commission": "6",
"invoice_value_fob": "600",
"invoice_value_cif": "50",
"invoice_quantity": "40",
"supplier_name": "asd",
"buyer_name": "Rohit"
},

{
"_id": "57ecb2861365a8150a34c660",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 0,
"created": "2016-09-29T06:19:50.046Z",
"shipment_id": "57dc0ad6a752016f1638c6bc",
"raised": true,
"conversion_rate": "62",
"percentage_tds": "10",
"percentage_servicetax": "15",
"percentage_commission": "4",
"invoice_value_fob": "400",
"invoice_value_cif": "50",
"invoice_quantity": "40",
"supplier_name": "asd",
"buyer_name": "Rohit"
},

{
"_id": "57ecb2861365a8150a34c660",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 0,
"created": "2016-09-29T06:19:50.046Z",
"shipment_id": "57dc0ad6a752016f1638c6bc",
"raised": true,
"conversion_rate": "62",
"percentage_tds": "10",
"percentage_servicetax": "15",
"percentage_commission": "3",
"invoice_value_fob": "100",
"invoice_value_cif": "50",
"invoice_quantity": "40",
"supplier_name": "asd",
"buyer_name": "Rohit"
},]

});

/* Put your css in here */

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";
}
.margin{
      margin-top: 20px;
}

<!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="style.css" />
    <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>
    <script src="app.js"></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"> fob </th>
            <th rowspan="2"> Commision </th>
            <th rowspan="2">Quantity</th>
            </tr>
    </thead>
       <tr ng-repeat="mani in resultValue=(sryarndebitnote |  filter:{raised: 'false'} )"> 
          <td >{{$index + 1}}</td>
            <td >{{mani.invoice_value_fob}}</td>
              <td >{{(mani.invoice_value_fob * (mani.percentage_commission / 100)) | number:2}}</td>
                 <td >{{mani.invoice_quantity}}</td>
           </tr>
               <tr>
                 <td>sum</td>
                 <td>{{resultValue | sumOfValue:'invoice_value_fob'}}</td>
                 <td>A = {{resultValue | totalSumCV:'invoice_value_fob':'percentage_commission'}}</td>
                 <td></td>
               </tr>
      </table>
              
    <table ng-table="tableParams"  class="margin table table-bordered ">
      <thead>
        <tr>
            
            <th rowspan="2"> S.No </th>
            <th rowspan="2"> fob </th>
            <th rowspan="2"> Commision </th>
            <th rowspan="2">Quantity</th>
            </tr>
    </thead>
      <tr ng-repeat="mani in resultValue2=(sryarndebitnote | filter:{raised: 'true'})"> 
        <td >{{$index + 1}}</td>
           <td >{{mani.invoice_value_fob}}</td>
             <td >{{(mani.invoice_value_fob * (mani.percentage_commission / 100)) | number:2}}</td>
                <td >{{mani.invoice_quantity}}</td>
              
          </tr>
               <tr>
                 <td>sum</td>
                 <td>{{resultValue2 | sumOfValue:'invoice_value_fob'}}</td>
                 <td>B = {{resultValue2 | totalSumCV:'invoice_value_fob':'percentage_commission'}}</td>
                 <td></td>
               </tr>
      </table>
              
    <table ng-table="tableParams"  class="margin table table-bordered ">
      <thead>
        <tr>
            
          <th rowspan="2"> S.No </th>
            <th rowspan="2"> A + B </th>
          </tr>
    </thead>
             
            <td >{{resultValue2 | totalSumCV:'invoice_value_fob':'percentage_commission'}}</td>
                <td >C = {{((resultValue | totalSumCV:'invoice_value_fob':'percentage_commission') * 1) + ((resultValue2 | totalSumCV:'invoice_value_fob':'percentage_commission')*1)}}</td>
              
          </table>
  </body>

</html>

请运行代码。

Here is the plunker