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（分频器）

第四项
第五项

我非常喜欢离子＆amp; amp;角度，我不知道如何实现这一点。可以使用一些自定义过滤器吗？

总而言之，我正在寻找与Angular: Getting list with ng-repeat with dividers / separators类似的东西，但日期为分隔符而不是首字母。

一些想法？

非常感谢任何帮助/提示！

Answer 1

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

＆＃13;

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"
    }]
  }


});

＆＃13;

<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>

＆＃13;

Answer 2

我在另一个SO问题中解决了这个问题，Ionic Dynamic List Divider。基本上你可以修改列表（在控制器中，而不是当然来源）来包含日期。在您的视图中，您会注意到这一点并将它们渲染为分隔符。

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

2 个答案: