AngularJS列表，自定义过滤器未正确排序(AngularJS list with custom filter not sorting correctly)
我试图弄清楚为什么我的angularjS“最新即将发生的事件”列表没有正确显示最新的即将发生的事件。 订单似乎不合适。
不合适的日期列表： 现场演示
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提要如下所示：
[ { "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" } ]任何提示，所以我可以尝试解决这个问题？ 谢谢！
I am trying to figure out why my angularjS "latest upcoming events" list is not correctly showing the latest upcoming events. The order seems out of place.
Out of place dated list: Live demo here
Upcoming events: Repeating Event 2015-07-16 Meeting 2015-07-26 Happy Hour 2015-07-19 Meeting at Google 2015-07-15Here is my view:
<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>And here is my controller with a custom filter to show the latest upcoming events based on current date:
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'];The JSON feed looks like so:
[ { "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" } ]Any tips so I can try to troubleshoot this? Thanks!
最满意答案
如果您打算按降序按开始日期过滤项目，可以使用orderBy：
<ul ng-repeat="event in events | upcomingEvents |orderBy:'-start'| limitTo: 4"> <li>{{ event.title }}</li> <li>{{ event.start }}</li> </ul>If your intention is to filter the items by the start dates in descending order, you can use orderBy:
<ul ng-repeat="event in events | upcomingEvents |orderBy:'-start'| limitTo: 4"> <li>{{ event.title }}</li> <li>{{ event.start }}</li> </ul>更多推荐
发布评论