Wie Gesamtsumme innerhalb Array-Werte in Angularjs Summe?

Question

Ich benutze MEAN Stack in meiner Anwendung mit AngularJS als meine Front-End. Wie die Summe innerhalb Array-Werte in angularjs, tatsächlich haben wir verwendet ng-wiederholen innerhalb einer weiteren ng-Wiederholung, um den Wert in der Tabelle zu holen und ich habe den abgerufenen Wert wie 250 in Sprice dann erwarte ich zu totalsum die sprice Wert wie ein ans= 250.

My Plunker.

• Wir haben verwendet zwei ng-repeat die sprice Werte in der Tabelle zu erhalten, weil sprice in Inneren des [array] ist.

• Wir müssen die Gesamtsumme sprice des Wertes in der Tabelle berechnen.

• Wir haben Filterfunktionalität, um den totalsum des ng-Modulwertes zu berechnen, wenn es ohne Array ist.

• Eigentlich können wir nicht resultValue= in ng-wiederholen.

• Zum Beispiel: spice Wert ist 250 in der Tabelle bedeutet die Totalsum Wert muss in 250 sein, wenn spice Wert ist 250 und 300 bedeutet erwartet Antwort wie 550.

• Ohne array totalSum Funktionalität: My Plunker

• Mit array totalSum Funktionalität: My Plunker

Mein Controller:

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

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

* Wir für Gesamtsumme in Array-Werte zu erwarten.

Gebrauchte ng-repeat:

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


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

Answer 1

ng-repeat ist nicht looping richtig .. Ich habe es behoben .. Überprüfen Sie unten Snippet und auch ich fügte ein weiteres Array zu ihm .......... lass es mich wissen ..

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

Hier können Sie Funktion "ng-init" nennen, so dass AngularJS wird Funktion vor der Ausführung von "ng-repeat" nennen.

In dieser Funktion können Sie die Iteration durchführen und die Summe berechnen und in der Bereichsvariablen halten, um sie anzuzeigen.