如何在Angularjs中的數組內值的總和？

Question

我在AngularJS的應用程序中使用MEAN堆棧作爲我的前端。如何在angularjs中的數組值的總和，實際上我們已經使用ng-repeat內部的一個更多的ng-repeat來獲取表中的值，並且我得到了像250在Sprice中提取的值，然後我期望總計sprice值如同ans= 250。

My Plunker。

• 我們已經使用了兩個NG-重複獲得在表中的sprice值，因爲sprice是在[排列]內。

• 我們需要計算表中的sprice的總和。

• 我們有過濾功能來計算ng-module值的總和，如果它沒有數組的話。

• 其實我們不知道如何在ng-repeat中使用resultValue=。

• 例如：表中的sprice值爲250意味着總數值需要在250，如果sprice值爲250，並且300表示期望回答如550。

• 沒有array totalsum功能：My Plunker

• 隨着array totalsum功能：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); 
    } 
}) 

我的大TA： -

$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-重複：

<tr ng-repeat="order in orders"> 


      <td>{{$index + 1}}</td> 
      <td ng-repeat="ram in order.orderfood">{{ram.sprice }}</td> 

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

 
});

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> 
 
\t <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> 
 
\t \t \t </tbody> 
 
       </table> 
 
</body> 
 

 
</html>

Answer 2

在這裏，您可以使用通話功能 「NG-初始化」，使angularjs將調用函數 「NG重複」 執行之前。

在該函數中，您可以執行迭代並計算總數並將其保存在範圍變量中以顯示它。