AngularJS：汇总循环中子数组的值

Question

我试图显示AngularJS的值。现在我想将所有值总结为其父变量sum。

我的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>

每当您更改输入框中的值时，它都会自动更新它的值。

看到这个plunkr

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>