使用 AngularJS 的 FILTER 函数计算过滤器中重复元素的总和答案

【问题标题】：Calculation of the sum of repeating elements within a filter using the FILTER function of AngularJS使用 AngularJS 的 FILTER 函数计算过滤器中重复元素的总和
【发布时间】：2019-06-10 23:31:05
【问题描述】：

我有一个显示记录总数的列表，当过滤单个名称时，它仍然向我显示记录总数，而不是过滤记录的总数。 TRY HERE

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
  name:
<input type="text" ng-model="model_filter">
  <hr/>
    <table ng-controller="myCtrl" border="1">
        <tr ng-repeat="x in records | filter: model_filter">
            <td>{{x.Name}}</td>
            <td>{{x.Money | currency}}</td>
        </tr>
        <tr>
            <td>TOTAL</td>
            <td>{{Total | currency}}</td>
        </tr>
    </table>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.records = [
                {
                    "Name": "Rodrigo",
                    "Money": 10
                },
                {
                    "Name": "Rodrigo",
                    "Money": 25
                },
                {
                    "Name": "Arnodl",
                    "Money": 15
                },
                {
                    "Name": "Carlos",
                    "Money": 5
                }
            ]
            $scope.Total = 0;
            for (var i = 0; i < $scope.records.length; i++) {
                $scope.Total += $scope.records[i].Money;
            }

        });
    </script>

</body>
</html>

结果：

带过滤器：

我的问题

【问题讨论】：

Calculating sum of repeated elements in AngularJS ng-repeat的可能重复
@Dementic 不，这是另一个问题，解决方案并查看它
如果您单击Run code snippet，您的代码将准确返回您所要求的内容。旁注：您可以将 for 循环替换为 $scope.total = $scope.records.reduce((a, b) => a.Money + b.Money, 0)
我试过了，但是不行Withless loop
我的错，$scope.records.reduce((total, b) => total + b['Money'], 0)

标签： javascript angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp">
  name:
  <input type="text" ng-model="model_filter">
  <hr/>
  <table ng-controller="myCtrl" border="1">
    <tr ng-repeat="x in records | filter: model_filter">
      <td>{{x.Name}}</td>
      <td>{{x.Money | currency}}</td>
    </tr>
    <tr>
      <th>TOTAL</th>
      <td>{{Total()}}</td>
    </tr>
    <tr>
      <th>TotalFiltered</th>
      <td>{{ TotalFiltered() }}</td>
    </tr>
  </table>
  <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
      $scope.records = [{
          "Name": "Rodrigo",
          "Money": 10
        },
        {
          "Name": "Rodrigo",
          "Money": 25
        },
        {
          "Name": "Arnodl",
          "Money": 15
        },
        {
          "Name": "Carlos",
          "Money": 5
        }
      ]
      $scope.Total = () => $scope.records.reduce((total, b) => total + b.Money, 0);
      $scope.TotalFiltered = () => {
        return $scope.records.reduce((total, b) => {
          if ($scope.model_filter && b.Name.toUpperCase().includes($scope.model_filter.toUpperCase())) { return total + b.Money; }
          else { return total; }
        }, 0);
      }
    });
  </script>

</body>

</html>

【讨论】：

【解决方案2】：

要达到预期效果，请使用以下选项

对过滤值使用范围变量

ng-repeat="x in filteredValues = (records | filter: model_filter)"

2.使用 ng-keyup 获取输入字段的过滤值

<input type="text" ng-model="model_filter" ng-keyup="calcTotal($event)">

3。在 Key up 事件中，使用过滤后的值再次计算总计

$scope.calcTotal = function(e){
            $scope.Total = 0;
            for (var i = 0; i < $scope.filtered.length; i++) {
                     $scope.Total += $scope.filtered[i].Money;

            }
          }

codepen - https://codepen.io/nagasai/pen/KjPrvr

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  name:
<input type="text" ng-model="model_filter" ng-keyup="calcTotal($event)">
  <hr/>
    <table border="1">
        <tr ng-repeat="x in filteredValues = (records | filter: model_filter)">
            <td>{{x.Name}}</td>
            <td>{{x.Money | currency}}</td>
        </tr>
        <tr>
            <td>TOTAL</td>
            <td>{{Total | currency}}</td>
        </tr>
    </table>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
          $scope.calcTotal = function(e){
            $scope.Total = 0;
            for (var i = 0; i < $scope.filteredValues.length; i++) {
                     $scope.Total += $scope.filteredValues[i].Money;
              
            }
          }
            $scope.records = [
                {
                    "Name": "Rodrigo",
                    "Money": 10
                },
                {
                    "Name": "Rodrigo",
                    "Money": 25
                },
                {
                    "Name": "Arnodl",
                    "Money": 15
                },
                {
                    "Name": "Carlos",
                    "Money": 5
                }
            ]
            $scope.Total = 0;
            for (var i = 0; i < $scope.records.length; i++) {
                     $scope.Total += $scope.records[i].Money;
              
            }
        });
    </script>

</body>
</html>

您的代码有问题： 计算 $scope.records 上的总数，它始终与过滤器和没有过滤器的事件相同
Total 是使用 $scope.records 而不是过滤器在初始负载上计算的

【讨论】：