每天 ng-repeat groupBy 日期字段

Question

我正在尝试 groupBy 一个日期，它是一个 JS 日期对象。我想每天对数据进行分组。
我有什么想法可以在视图中执行此操作吗？

$scope.data = {
  messages: [
    {
      date: new Date(1432811030 * 1000),
      message: 'Some text 01'
    },
    {
      date: new Date(1432731600 * 1000),
      message: 'Some text 02'
    },
    {
      date: new Date(1432819703 * 1000),
      message: 'Some text 03'
    }
  ]
};

在我看来我使用：

<div ng-repeat="(key, value) in data.messages | groupBy: 'date'">
  <div>{{ key }}</div>
  <div ng-repeat="message in value">
    <div>{{ message.message }}</div>
  </div>
</div>

我在 mu 项目中包含这个 angular.filter 模块：https://github.com/a8m/angular-filter

问题是我现在按 date/time 分组而不是每天分组。知道怎么做吗？

Answer 1

这里有两种方法。一种是使用group by。另一个我想要的是按天对我的数据进行预分组，并有一个 "dumb" 视图，它不进行分组，而是预先或至少在服务中完成分组在控制器中。我会添加一个 plunkr 来演示。

http://plnkr.co/edit/z1Y4147sCw2cCAfunHwg?p=preview

如果您有这样的数据：

vm.data = [
    {day: new Date(1432811030000), msg: 'someText'}, 
    {day: new Date(1432811030000), msg: 'someText2'},
    {day: new Date(1432811030000), msg: 'someText3'},
    {day: new Date(1432731600000), msg: 'someTextDay2'},
    {day: new Date(1432731600000), msg: 'someTextDay2-1'}, 
    {day: new Date(1432731600000), msg: 'someTextDay2-2'},
    {day: new Date(1432819703000), msg: 'someTextDay3'},
    {day: new Date(1432819703000), msg: 'someTextDay3'}
  ];

相关代码如下：

 <ul data-ng-repeat="(key, val) in vm.data | groupBy: 'day'">
      Day: {{key}}
      <li data-ng-repeat="msg in val">
         {{msg.msg}}
      </li>
  </ul>

而且，另一方面，如果您要对数据进行预分组，您视图中的相关代码将如下所示：

<ul data-ng-repeat="(key, val) in vm.groupedData">
   Day: {{key}}
   <li data-ng-repeat="msg in val">
      {{msg.msg}}
   </li>
</ul>

这是每天对它们进行分组的 js 代码：

 var groupByDate = function groupByDate(messages){
      var grouped = {};
      _.forEach(messages, function(msg){
          var actualDay = new Date(msg.day - (msg.day % 86400000));
          if ( !grouped[actualDay] ){
            grouped[actualDay] = [];
          }
          grouped[actualDay].push(msg);
      });

      return grouped;
  };

Answer 2

演示：http://plnkr.co/edit/djPMu4UH9t9BeGwBcUMI

截图：https://www.dropbox.com/s/9z5t6nsp3x1266s/Screenshot%202015-05-28%2019.50.44.png?dl=0

HTML:

<body ng-app="myApp" ng-controller="myController">
  <div ng-repeat="(key, value) in testData.messages">
    <div>{{ key }}</div>
    <div ng-repeat="message in value">
      <div>{{ message }}</div>
    </div>
  </div>
</body>

JS:

var app = angular.module('myApp', []);
app.controller('myController', function($scope) {

  $scope.data = {
    messages: [
      {
        date: new Date(1432811030 * 1000),
        message: 'Some text 01'
      },
      {
        date: new Date(1432731600 * 1000),
        message: 'Some text 02'
      },
      {
        date: new Date(1432819703 * 1000),
        message: 'Some text 03'
      }
    ]
  };


  $scope.convertTo = function (arr, key, dayWise) {
    var groups = {};
    for (var i=0;l= arr.length, i<l;i++) {
      if (dayWise) {
        arr[i][key] = arr[i][key].toLocaleDateString();
      }
      else {
        arr[i][key] = arr[i][key].toTimeString();
      }
      groups[arr[i][key]] = groups[arr[i][key]] || [];
            groups[arr[i][key]].push(arr[i]);
    }
    return groups;
    };

     $scope.testData = {};
     angular.copy($scope.data, $scope.testData);

    $scope.testData.messages = $scope.convertTo($scope.testData.messages, 'date', true);
    console.log($scope.testData)

});

每天 ng-repeat groupBy 日期字段

ng-repeat groupBy date field per day

angularjs

angularjs-ng-repeat

angular-filters