如何根据AngularJS中的数据添加分组？

Question

我有一个对象数组，由数量和日期组成，如下所示

$scope.items = [
  {
    "date": "2017-05-18T00:00:00.000Z",
    "quantity": 50,
    "id": 5
  },
  {
    "date": "2017-05-18T00:00:00.000Z",
    "quantity": 6,
    "id": 7
  },
  {
    "date": "2017-05-19T00:00:00.000Z",
    "quantity": 50,
    "id": 11
  },
  {
    "date": "2017-05-19T00:00:00.000Z",
    "quantity": 10,
    "id": 30
  },
  {
    "date": "2017-05-19T00:00:00.000Z",
    "quantity": 10,
    "id": 31
  }
];

并且正在 date 应用 groupBy，如下所示，

    <div class="row" ng-repeat="log in items | groupBy: 'date'">
        <div class="col-md-12">
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in log">
                        <td>{{item.updatedAt | date : 'dd-MMM-yyyy'}}</td>
                        <td>{{item.quantity}}</td>
                        <td>total of quantity</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

这里，如何添加按对象分组的数量并显示。例如，2017 年 5 月 18 日 的 总数量 将为 50 + 6 = 56。

Answer 1

演示

var app = angular.module("myApp", ['angular.filter']);
app.controller("SimpleController", function($scope) {
  $scope.items = [
  {
    "date": "2017-05-18T00:00:00.000Z",
    "quantity": 50,
    "id": 5
  },
  {
    "date": "2017-05-18T00:00:00.000Z",
    "quantity": 6,
    "id": 7
  },
  {
    "date": "2017-05-19T00:00:00.000Z",
    "quantity": 50,
    "id": 11
  },
  {
    "date": "2017-05-19T00:00:00.000Z",
    "quantity": 10,
    "id": 30
  },
  {
    "date": "2017-05-19T00:00:00.000Z",
    "quantity": 10,
    "id": 31
  }];
  
  $scope.calculatetotal = function(arrayGrouped){
       var total = 0;
       arrayGrouped.forEach(function(key,value){
              total+=key.quantity;
       });
       return total;
  }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js" > </script>
<body ng-app="myApp">
    <div>
        <div data-ng-controller="SimpleController">
          <div class="row" ng-repeat="log in items | groupBy: 'date'">
        <div class="col-md-12">
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in log">
                        <td>{{item.date | date : 'dd-MMM-yyyy'}}</td>
                        <td>{{calculatetotal(log)}}</td>
                        <td>total of quantity</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
        </div>
    </div>
</body>

</html>

Answer 2

看到这个：

var MyApp = angular.module("MyApp",['angular.filter']);
MyApp.controller("MyCtrl",['$scope',MyCtrl]);
function MyCtrl($scope) {
$scope.items = [
  {
    "date": "2017-05-18T00:00:00.000Z",
    "quantity": 50,
    "id": 5
  },
  {
    "date": "2017-05-18T00:00:00.000Z",
    "quantity": 6,
    "id": 7
  },
  {
    "date": "2017-05-19T00:00:00.000Z",
    "quantity": 50,
    "id": 11
  },
  {
    "date": "2017-05-19T00:00:00.000Z",
    "quantity": 10,
    "id": 30
  },
  {
    "date": "2017-05-19T00:00:00.000Z",
    "quantity": 10,
    "id": 31
  }
];
  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
<div class="row" ng-repeat="log in items | groupBy: 'date'">
        <div class="col-md-12">
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Quantity</th>
                        <th>Total Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in log">
                    
                        <td>{{item.date | date : 'dd-MMM-yyyy'}}</td>
                        <td>{{item.quantity}}</td>
                        <td>{{log | map : 'quantity' | sum }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    </div>

如何根据AngularJS中的数据添加分组？

How to add the group by data in AngularJS?

angularjs

angularjs-filter