AngularJS：總結循環內子數組的值

Question

我試圖顯示AngularJS值。 現在，我想將所有值加總為其父變量總和。

我的AngularJs數組看起來像：

{  
   "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"
      }
   ]
}

碼：

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

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

</tr>

如果我在文本框中進行更改，則可以使用：

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

但是我想在循環內鍵入時總結所有值。

Answer 1

只需創建一個求和函數

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

和一些輸出

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

並且只要您在輸入框中更改值，它就會自動更新其值。

看到這個笨蛋

Answer 2

更改html以添加一個ng-change事件偵聽器，該偵聽器在更新輸入字段時會加上新值。

<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"   />

在控制器中添加以下代碼以處理附加邏輯：

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

Answer 3

您可以創建一個自定義指令

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