如何使用AngularJS按年和月分组数据' $过滤器

时间:2017-03-12 22:55:21

标签: javascript angularjs aggregate angularjs-filter

所以我有以下数据集,我希望使用<button onclick="myFunction()" id="images">Click me</button>属性按年,月分组/聚合。

数据集

dateObject

以下是我想在汇总数据后构建数据的方法:

$scope.dataSet = [
    {
        _id :   58b57e442bf752389a940fea,
        time    :   01:39 PM,
        status  :   Submitted,
        date    :   2017-02-28T13:39:34.955Z,
        dateObject      : {
            dayOfTheMonth   :   28,
            dayOfTheWeek    :   Tuesday,
            month   :   February,
            year    :   2017
        }
    },
    {
        _id :   58b57e442bf9820389a940fea,
        time    :   05:18 PM,
        status  :   Submitted,      
        date    :   2014-02-28T13:39:34.955Z,
        dateObject      : {
            dayOfTheMonth   :   28,
            dayOfTheWeek    :   Tuesday,
            month   :   February,
            year    :   2014
        }
    },
    {
        _id :   58b57e442bf9820389a940fea,
        time    :   05:55 AM,
        status  :   Processing,     
        date    :   2016-03-18T13:39:34.955Z,
        dateObject      : {
            dayOfTheMonth   :   18,
            dayOfTheWeek    :   Friday,
            month   :   March,
            year    :   2016
        }
    }
]  

使用AngularJS中的[ { '2017' : [ 'March' : [ { _id : 58b57e442bf752389a940fea, time : 01:39 PM, status : Submitted, date : 2017-02-28T13:39:34.955Z, dateObject : { dayOfTheMonth : 28, dayOfTheWeek : Tuesday, month : February, year : 2017 } } ] ] }, { '2016' : [ 'February' : [ { _id : 58b57e442bf9820389a940fea, time : 05:55 AM, status : Processing, date : 2016-03-18T13:39:34.955Z, dateObject : { dayOfTheMonth : 18, dayOfTheWeek : Friday, month : March, year : 2016 } } ] ] }, { '2014' : [ 'February' : [ { _id : 58b57e442bf9820389a940fea, time : 05:18 PM, status : Submitted, date : 2014-02-28T13:39:34.955Z, dateObject : { dayOfTheMonth : 28, dayOfTheWeek : Tuesday, month : February, year : 2014 } } ] ] } ] $scope.dataByYear = $filter('groupBy')($scope.dataSet, 'dateObject.year') $scope.dataByMonth = $filter('groupBy')($scope.dataSet, 'dateObject.month') 时(如上所示),我可以按年或按月对数据集进行分组。我的问题是我想按年和月对数据集进行分组。我怎样才能做到这一点?

1 个答案:

答案 0 :(得分:1)

尝试使用groupBy过滤器:

(function(angular) {
  'use strict';
var myApp = angular.module('app', ['angular.filter']);

myApp.controller('MyController', ['$scope', '$filter', function($scope, $filter) {        
    var dataSet = [
      {_id:'1', dateObject:{year:2001,month:'February'}},
      {_id:'2', dateObject:{year:2001,month:'February'}},
      {_id:'3', dateObject:{year:2001,month:'April'}},
      {_id:'4', dateObject:{year:2001,month:'April'}},
      {_id:'5', dateObject:{year:2003,month:'October'}},
      {_id:'6', dateObject:{year:2003,month:'October'}},
      {_id:'7', dateObject:{year:2003,month:'April'}}
    ];    
        
    var filter = $filter('groupBy');
    $scope.answer = filter(dataSet, 'dateObject.year');
    for(var key in $scope.answer)
        $scope.answer[key] = filter($scope.answer[key], 'dateObject.month');
    
}]);
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.15/angular-filter.js"></script>

<body ng-app="app">
  <div ng-controller="MyController">
 <li ng-repeat="(key, value) in answer | orderBy: 'key'">
   Year: {{key}}   
     <ul>
      <li ng-repeat="(key2, value2) in value | orderBy: 'key2'">      
         Month: {{key2}}   
         <ul>
          <li ng-repeat="item in value2 | orderBy: '_id'">      
             {{item._id}}   
          </li>
        </ul>   
      </li>
    </ul>
 </li>
</div>
</body>