如何根据JSON列表和当前时间显示最新事件？(How to show latest events based on JSON list and current time?)

我试图找出一种方法来列出使用AngularJS消耗JSON提要的“最新即将发生的事件”。

我想抓住今天的当前日期 （使用服务器端或客户端？），然后遍历JSON列表，只根据今天的当前日期打印/过滤最近2个即将发生的事件。***

以下是我设置控制器的方法：

var app = angular.module('listApp', []); app.controller('Ctrl', function($scope){ $scope.events = [ { "title": "All Day Event", "start": "2015-07-11" }, { "title": "Long Event", "start": "2015-07-07" }, { "title": "Repeating Event", "start": "2015-07-16" }, { "title": "Repeating Event", "start": "2015-07-10" } ] });

这是我的观点：

<body ng-app="listApp"> <div class="container" ng-controller="Ctrl"> <h3>Upcoming events:</h3> <ul ng-repeat="event in events | limitTo: 2"> <li>{{ event.title }}</li> <li>{{ event.start }}</li> </ul> </div>

我想我需要使用Date.now（）在控制器中编写一个条件语句，但我不确定如何开始。 也许我走错了路，其他人有更好的方法？

I am trying to figure out a way to list the "latest upcoming events" using AngularJS consuming a JSON feed.

I want to grab today's current date (using either server or client side?) and then iterate through a JSON list and only print/filter the latest 2 upcoming events based on today's current date.***

Here's how I have my controller set up:

var app = angular.module('listApp', []); app.controller('Ctrl', function($scope){ $scope.events = [ { "title": "All Day Event", "start": "2015-07-11" }, { "title": "Long Event", "start": "2015-07-07" }, { "title": "Repeating Event", "start": "2015-07-16" }, { "title": "Repeating Event", "start": "2015-07-10" } ] });

Here's my view:

<body ng-app="listApp"> <div class="container" ng-controller="Ctrl"> <h3>Upcoming events:</h3> <ul ng-repeat="event in events | limitTo: 2"> <li>{{ event.title }}</li> <li>{{ event.start }}</li> </ul> </div>

I think I need to write a conditional statement in the controller utilizing the Date.now(), but I am unsure how to get started. Perhaps I am on the wrong path and someone else has a better approach?

最满意答案

您需要使用Date函数将起始字符串转换为Date，然后您可以实现自定义过滤器以获取即将发生的事件并按日期排序。之后，您可以对其应用limitTo。请在下面找到代码。

app.controller('EventController', function($scope){ $scope.events = [ { "title": "All Day Event", "start": new Date("2015-07-11") }, { "title": "Long Event", "start": new Date("2015-07-07") }, { "title": "Repeating Event", "start": new Date("2015-07-16T16:00:00-05:00") }, { "title": "Repeating Event", "start": new Date("2015-07-09T16:00:00-05:00") } ]; });

自订过滤器：

app.filter('upcomingEvents', function () { return function (input) { var upcomingEvents = []; upcomingEvents = input.filter(function (data) { var currentDate = new Date(); if ((data.start - currentDate) >= 0) { return true; } else { return false; } }); upcomingEvents.sort(function (a, b) { return a.start - b.start; }); return upcomingEvents; }; });

和HTML

<div ng-controller="EventController"> <h3>Upcoming events:</h3> <ul ng-repeat="event in events | upcomingEvents | limitTo: 2"> <li>{{ event.title }}</li> <li>{{ event.start }}</li> </ul> </div>

我在上面实现了“comingEvents”并在我的HTML中使用它。

如果您有疑问，请随时询问。

You need to convert your start String to Date using Date function, then you can implement custom filter to get upcoming events and order them by date. After that you can apply limitTo on it. Please find the code below.

app.controller('EventController', function($scope){ $scope.events = [ { "title": "All Day Event", "start": new Date("2015-07-11") }, { "title": "Long Event", "start": new Date("2015-07-07") }, { "title": "Repeating Event", "start": new Date("2015-07-16T16:00:00-05:00") }, { "title": "Repeating Event", "start": new Date("2015-07-09T16:00:00-05:00") } ]; });

Custom filter:

app.filter('upcomingEvents', function () { return function (input) { var upcomingEvents = []; upcomingEvents = input.filter(function (data) { var currentDate = new Date(); if ((data.start - currentDate) >= 0) { return true; } else { return false; } }); upcomingEvents.sort(function (a, b) { return a.start - b.start; }); return upcomingEvents; }; });

And HTML

<div ng-controller="EventController"> <h3>Upcoming events:</h3> <ul ng-repeat="event in events | upcomingEvents | limitTo: 2"> <li>{{ event.title }}</li> <li>{{ event.start }}</li> </ul> </div>

I have implemented "upcomingEvents" above and used it in my HTML.

Please feel free to ask in case you have doubt.

更多推荐