AngularJS：总结循环内子数组的值

Question

I was trying to display values of AngularJS . Now I want to sum up all the values to its parent variable sum.

My AngularJs Array Looks Like:

{  
   "isInternalInvoice":1,
   "name":"Invoices",
   "sum":50,
   "articles":[  
      {  
         "ID":"130.0000917-17.557000506.1",
         "betrag_netto":"20",
      },
      {  
         "ID":"130.0000917-17.557000581.1",
         "betrag_netto":"30"
      }
   ]
}

Code:

<tr ng-repeat="invoice in currentInternalInvoices" >

 <input type="text" ng-model="invoice.betrag_netto"  />

</tr>

If I make changes in textbox it works:

<input type="text" ng-model="$parent.data.sum" ng-bind="$parent.data.sum"  />

But I want to sum up all the values while typing inside loop.

Answer 1

Just create a summing function

$scope.getSum = function() {
  return $scope.data.articles.reduce((a, b) => a+Number(b.betrag_netto), 0);
}

and something to output it

<div>{{getSum()}}</div>

and it will automatically update it's value whenever you change the value in the input boxes.

See this plunkr

Answer 2

Change the html to add a ng-change event listener which sums withe new value as the input field is updated.

<tr ng-repeat="invoice in currentInternalInvoices" >

 <input type="text" ng-model="invoice.betrag_netto" ng-change="doSum()" />
</tr>
<input type="text" ng-model="data.sum"   />

Add this code in controller to handle the addition logic:

$scope.doSum = function() {
    $scope.data.sum = $scope.data.articles.reduce((a, b) => a+Number(b.betrag_netto), 0);
  }

Answer 3

You could create a custom directive

 (function() { "use strict"; class MyController { constructor(dataService) { this.dataService = dataService; this.data = { sum: 0 } } $onInit() { this.data = this.dataService.get(); console.info('running'); } static get $inject() { return ['dataService']; } } const app = angular.module('app', []) .factory({ dataService }) .controller({ MyController }) .directive({ sum }); function sum() { return { restrict: 'A', bindToController: { sum: '=', sumSource: '=', sumBy: '@', }, scope: true, controller: class { $doCheck() { this.sum = this.sumSource.reduce((sum, { [this.sumBy]: value }) => Number(sum) + Number(value), 0); } } } } function dataService() { return { get() { return { "isInternalInvoice": 1, "name": "Invoices", "sum": 50, "articles": [{ "ID": "130.0000917-17.557000506.1", "betrag_netto": "20", }, { "ID": "130.0000917-17.557000581.1", "betrag_netto": "30" } ] }; } }; } }()); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script> <div ng-app="app" ng-controller="MyController as c"> <table sum="c.data.sum" sum-by="betrag_netto" sum-source="c.data.articles"> <tr ng-repeat="item in c.data.articles"> <td> <input type="text" ng-model="item.betrag_netto"> </td> </tr> </table> {{c.data | json}} <div></div> </div>