json - AngularJS list with custom filter not sorting correctly -
i trying figure out why angularjs "latest upcoming events" list not correctly showing latest upcoming events. 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 @ google 2015-07-15 here 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 controller custom filter show 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 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 @ google", "url": "http://google.com/", "start": "2015-07-15" } ] any tips can try troubleshoot this? thanks!
if intention filter items start dates in descending order, can use orderby:
<ul ng-repeat="event in events | upcomingevents |orderby:'-start'| limitto: 4"> <li>{{ event.title }}</li> <li>{{ event.start }}</li> </ul>
Comments
Post a Comment