どのようにAngularjsで配列値の合計の合計？

Question

AngularJSをフロントエンドとして使用しているアプリケーションでMEANスタックを使用しています。どのようにanglejsの配列値の合計を合計するには、実際には、ng-repeatを1回以上ng-repeatの中で使用してテーブルの値を取得しました。250のような値を取り出しました。Spricespriceans= 250のような値です。

My Plunker。

• 我々はspriceは、[配列]の内部にあるため、表にsprice値を取得するために、2つのNGリピートを使用していました。

• テーブルの値の合計がspriceである必要があります。

• 配列なしでng-module値の合計を計算するフィルタ機能があります。

• 実際には、ng-repeatでresultValue=を使用する方法はわかりません。

• たとえば、テーブルのスプリス値が250であるということは、合計値がのような回答を期待する場合、合計値が250になる必要があることを意味します。 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); 
    } 
}) 

マイダ

array TOTALSUM機能なし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は正しくループしていません。私はそれを修正しました。下のスニペットを確認して、もう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); 
 
    } 
 
}).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

angularjsは "NGリピート" の実行前に関数を呼び出しますように、あなたは、 "NG-INIT" を使用して関数を呼び出すことができます。

この関数では、繰り返しを実行して合計を計算し、スコープ変数に保持して表示することができます。