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

我有一个JSON对象,其中包含不同的事件,如下所示：

{
   "error":false,"events":[
      {
         "id":1,"title":"First entry","date":"2014-11-04"
      },{
         "id":2,"title":"Second entry",{
         "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: Getting list with ng-repeat with dividers / separators的东西,但日期为分隔符而不是首字母.

一些想法？

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

您可以使用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",{
      "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>

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

猜你在找的Angularjs相关文章