小编7th*_*son的帖子

带有ng-repeat的角度列表,日期为分隔符

我有一个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"
      }
   ]
}
Run Code Online (Sandbox Code Playgroud)

该对象存储在我的控制器中的$ 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>
Run Code Online (Sandbox Code Playgroud)

我的目标是每天只将{{event.date}}显示为列表分隔符一次.所以在这个考试中,它看起来像这样:

2014-11-04(分频器)

  • 第一次进入

  • 第二次进入

2014-11-05(分频器)

  • 第三次进入

2014-11-06(分频器)

  • 第四次进入

  • 第五次进入

我非常注重离子和角度,我不知道如何实现这一目标.可能有一些自定义过滤器?

总而言之,我正在寻找类似于Angular的东西:获取带有分隔符/分隔符的ng-repeat列表但是将日期作为分隔符而不是首字母.

一些想法?

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

angularjs angularjs-ng-repeat ionic-framework

2
推荐指数
1
解决办法
7944
查看次数

Ionic v3:按日期/日列出的组列表

在Ionic的旧版本1中,我能够构建按日期分组的事件列表,如下所示:

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

  <div class="item item-divider" ng-if="value">
    {{ ::key | event.date }}
  </div>

  <ion-item class="item" ng-repeat="event in value track by event.event.event_id">
    {{ ::event.event.title }}
  </ionic-item>

</ion-list> 
Run Code Online (Sandbox Code Playgroud)

虽然事件对象看起来像这样(事件#1和#3共享相同的日期):

{
  "events": [
    {
      "id": 1,
      "date": "2017-12-26",
      "title": "First event"
    },
    {
      "id": 2,
      "date": "2017-12-30",
      "title": "Second event"
    },
    {
      "id": 3,
      "date": "2017-12-26",
      "title": "Third event"
    },
    {
      "id": 4,
      "date": "2017-12-31",
      "title": "Last event"
    }
  ]
}
Run Code Online (Sandbox Code Playgroud)

这给了我一个存储在"事件"对象中的事件列表,这些事件按"event.date"分组.所以在同一天的所有事件都按项目分隔符分组:

+--------------+
+ 2017-12-26   +
+--------------+
| …
Run Code Online (Sandbox Code Playgroud)

javascript ionic-framework ionic3 angular

2
推荐指数
1
解决办法
4125
查看次数