Как суммировать сумму внутри значений массива в Angularjs?

Question

Я использую стек MEAN в своем приложении с AngularJS как мой интерфейс. Как суммировать сумму внутри значений массива в angularjs, на самом деле мы использовали ng-repeat внутри еще одного ng-repeat, чтобы получить значение в таблице, и я получил полученное значение, например 250, в Sprice, тогда я ожидаю, что итоговое значение sprice значение как ans= 250.

My Plunker.

• Мы использовали два нг-повтора, чтобы получить sprice значения в таблице, поскольку sprice в внутренней части [массив].

• Нам нужно рассчитать общую сумму sprice значения в таблице.

• У нас есть функциональность фильтра для вычисления итогового значения значения ng-модуля, если он находится без массива.

• На самом деле мы не знаем, как использовать resultValue= в ng-repeat.

• Например: значение спринса 250 в таблице означает, что значение totalsum должно быть в 250, если значение спринса 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); 
    } 
}) 

My Da та: -

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

* Мы ожидали на общую сумму в значения массива.

Используется нг повтора:

<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

Здесь вы можете вызвать функцию с помощью "нг-INIT", так что angularjs будет вызывать функцию перед выполнением "нг-повтора".

В этой функции вы можете выполнить итерацию и вычислить общее количество и удерживать ее в переменной области видимости для ее отображения.