带有日期的ng-repeat角表

Question

我有一个带有不同事件的JSON对象，如下所示：

{
   "error":false,
   "events":[
      {
         "id":1,
         "title":"First entry",
         "date":"2014-11-04"
      },
      {
         "id":2,
         "title":"Second entry",
         "date":"2014-11-04"
      },
      {
         "id":3,
         "title":"Third entry",
         "date":"2014-11-05"
      },
      {
         "id":4,
         "title":"Fourth entry",
         "date":"2014-11-06"
      },
      {
         "id":5,
         "title":"Fifth entry",
         "date":"2014-11-06"
      }
   ]
}

该对象存储在我的控制器的$ scope.events中。

现在，我循环此数组以构建事件列表：

<ion-list>
<div class="item item-divider">
  {{event.date}}
</div>  
  <a class="item item-thumbnail-left" href="#/app/event/{{event.id}}" ng-repeat="event in events">
  <img src="media/thumbnails/{{event.id}}.jpg">
  <h1>{{event.title}}</h1>
  </a>
</ion-list>

我的目标是每天将{{event.date}}作为列表分隔符显示一次。因此，在此示例中，它应如下所示：

2014-11-04（分隔线）

• 第一次进入

• 第二次进入

2014-11-05（分隔线）

• 第三次进入

2014-11-06（分隔线）

• 第四次进入

• 第五项

我是离子和角膜的新手，我不知道该如何实现。可以使用一些自定义过滤器吗？

总而言之，我正在寻找与Angular类似的东西：使用带有分隔符/分隔符的ng-repeat获取列表，但使用日期作为分隔符而不是首字母。

有什么想法吗？

任何帮助/提示真的很感激！

Answer 1

您可以使用angular.filters（https://github.com/a8m/angular-
filter
）按日期对列表进行分组，请参见下面的演示

var app = angular.module('app', ['angular.filter']);



app.controller('homeCtrl', function($scope) {



  $scope.data = {

    "error": false,

    "events": [{

      "id": 1,

      "title": "First entry",

      "date": "2014-11-04"

    }, {

      "id": 2,

      "title": "Second entry",

      "date": "2014-11-04"

    }, {

      "id": 3,

      "title": "Third entry",

      "date": "2014-11-05"

    }, {

      "id": 4,

      "title": "Fourth entry",

      "date": "2014-11-06"

    }, {

      "id": 5,

      "title": "Fifth entry",

      "date": "2014-11-06"

    }]

  }





});


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>



<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.9/angular-filter.min.js"></script>



<div ng-app="app">

  <div ng-controller="homeCtrl">



    <ion-list ng-repeat="(key, value) in data.events | groupBy: 'date'">

      <div class="item item-divider">

        <h1> {{key}}</h1>

      </div>



      <a class="item item-thumbnail-left" href="#/app/event/{{event.id}}" ng-repeat="event in value">

        <img src="media/thumbnails/{{event.id}}.jpg">

        <h3>{{event.title}}</h3>

      </a>

    </ion-list>





  </div>