Question

我想弄清楚为什么我的angularjS“最新即将发生的事件”列表没有正确显示最近即将发生的事件。订单似乎不合适。

不合适的日期列表： Live demo here

Upcoming events:

Repeating Event
2015-07-16

Meeting
2015-07-26

Happy Hour
2015-07-19

Meeting at Google
2015-07-15

以下是我的观点：

<body ng-app="listApp">

<div class="container" ng-controller="EventController">

<h3>Upcoming events:</h3>

    <ul ng-repeat="event in events | upcomingEvents | limitTo: 4">
        <li>{{ event.title }}</li>
        <li>{{ event.start }}</li>
    </ul>

这是我的控制器，其中包含一个自定义过滤器，可根据当前日期显示最新即将发生的事件：

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

    app.controller('EventController', function($scope, $http){
        $http.get('http://www.ogmda.com/sandbox/fullcalendar/demos/json/events.json').success(function(data) { 
            $scope.events = data;
    })
});

    app.filter('upcomingEvents', function () {
 return function (input) {

var upcomingEvents = [];

 if(!input){
     return upcomingEvents;
    }     

upcomingEvents = input.filter(function (data) {
    var currentDate = new Date();

         console.log(new Date(data.start));

    if ((new Date(data.start) - currentDate) >= 0) {
        return true;
    } else {
        return false;
    }
});

upcomingEvents.sort(function (a, b) {
    return a.start - b.start;
});

 return upcomingEvents;
 };
});

app.$inject = ['$scope'];

JSON Feed看起来像这样：

 [
  {
  "title": "All Day Event",
  "start": "2015-07-11"
   },
   {
   "title": "Long Event",
   "start": "2015-07-07",
   "end": "2015-07-10"
   },
   {
   "id": "999",
   "title": "Repeating Event",
   "start": "2015-07-09"
    },
    {
    "id": "999",
    "title": "Repeating Event",
    "start": "2015-07-16"
    },
    {
    "title": "Meeting",
    "start": "2015-07-12"
    },
    {
    "title": "Conference",
    "start": "2015-07-11",
    "end": "2015-07-13"
    },
    {
    "title": "Meeting",
    "start": "2015-07-26",
    "end": "2015-07-30"
     },
     {
     "title": "Lunch",
     "start": "2015-07-12"
     },

     {
     "title": "Happy Hour",
     "start": "2015-07-19"
      },
      {
      "title": "Dinner",
      "start": "2015-07-12"
       },
       {
       "title": "Birthday Party",
        "start": "2015-07-04"
       },
        {
      "title": "Meeting at Google",
      "url": "http://google.com/",
      "start": "2015-07-15"
       }
       ]

任何提示，以便我可以尝试解决此问题？谢谢！

Answer 1

如果您打算按降序按开始日期过滤项目，可以使用orderBy：

 <ul ng-repeat="event in events | upcomingEvents |orderBy:'-start'| limitTo: 4">
        <li>{{ event.title }}</li>
        <li>{{ event.start }}</li>
    </ul>

AngularJS列表，自定义过滤器未正确排序

1 个答案: