Comment totaliser somme des valeurs de tableau en Angularjs?

Question

J'utilise la pile MEAN dans mon application avec AngularJS comme frontal. Comment faire la somme totale à l'intérieur des valeurs de tableau dans angularjs, en fait nous avons utilisé ng-repeat dans une autre ng-repeat pour récupérer la valeur dans table et j'ai obtenu la valeur récupérée comme 250 dans Sprice alors je m'attends à totaliser le sprice valeur comme ans= 250.

My Plunker.

• Nous avons utilisé deux ng-repeat pour obtenir les sprice valeurs dans le tableau parce que sprice est à l'intérieur du [tableau].

• Nous devons calculer la somme totale de sprice de la valeur dans le tableau.

• Nous avons une fonctionnalité de filtre pour calculer le total de la valeur de ng-module s'il est dans sans tableau.

• En fait, nous ne savons » comment utiliser resultValue= en ng répétition. Par exemple: la valeur de sprice est de 250 dans la table signifie que la valeur totale doit être en 250, si la valeur de sprice est 250 et 300 attend une réponse comme 550.

• Sans array fonctionnalité totalSum: My Plunker

• Avec array fonctionnalité totalSum: My Plunker

Mon contrôleur:

.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); 
    } 
}) 

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

Mon 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> 

* Attendons-nous pour la somme totale des valeurs de tableau.

ng répétition occasion:

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


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

Answer 1

ng-repeat ne boucle pas correctement .. Je l'ai réparé .. Vérifiez ci-dessous l'extrait et aussi j'ai ajouté un tableau de plus .......... laissez-moi savoir ..

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

Ici, vous pouvez appeler la fonction à l'aide "ng-init", de sorte que AngularJS fonctionnerons appel avant l'exécution de "ng répétition".

Dans cette fonction, vous pouvez effectuer une itération et calculer le total et le maintenir dans la variable de portée pour l'afficher.