带有 ng-repeat 和日期作为分隔符的角度列表 [英] Angular list with ng-repeat with date as divider

问题描述

我有一个包含不同事件的 JSON 对象，如下所示:

<代码>{错误":假​​，事件":[{身份证":1，"title":"第一个条目","日期":"2014-11-04"},{身份证":2，"title":"第二个条目","日期":"2014-11-04"},{身份证":3，"title":"第三个条目","日期":"2014-11-05"},{身份证":4，"title":"第四个条目","日期":"2014-11-06"},{身份证":5，"title":"第五个条目","日期":"2014-11-06"}]}

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

现在我循环这个数组来构建事件列表:

<div class="item item-divider">{{活动日期}}

<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(分隔线)

• 第四项

• 第五项

我是 ionic & 的新手angular，我不知道如何实现这一点.可以使用一些自定义过滤器吗?

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

一些想法?

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

解决方案

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

var app = angular.module('app', ['angular.filter']);app.controller('homeCtrl', function($scope) {$scope.data = {错误":错误，事件":[{身份证":1，"title": "第一个条目",日期":2014-11-04"}, {身份证":2，"title": "第二个条目",日期":2014-11-04"}, {身份证":3，"title": "第三个条目",日期":2014-11-05"}, {身份证":4，"title": "第四个条目",日期":2014-11-06"}, {身份证":5，"title": "第五个条目",日期":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}}

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

I've got a JSON object with different events that looks like this:

{
   "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"
      }
   ]
}

This object is stored in $scope.events in my controller.

Now I'm looping this array to build the list of 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>

My goal is to display {{event.date}} as a list divider just once for every day. So in this examle it shoudl look like this:

2014-11-04 (divider)

• First entry

• Second entry

2014-11-05 (divider)

• Third entry

2014-11-06 (divider)

• Fourth entry

• Fifth entry

I'm relly new to ionic & angular and I have no idea how to achieve this. May with some custom filter?

All in all I'm looking for something similar to Angular: Getting list with ng-repeat with dividers / separators but with the date as separator instead of initial letter.

Some ideas?

Any help/tip is really appreciated!

解决方案

You can use angular.filters (https://github.com/a8m/angular-filter) to group your list by date please see demo below

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>

这篇关于带有 ng-repeat 和日期作为分隔符的角度列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！