为什么这个自定义的Angular过滤器没有返回任何预期的匹配？

我有一个包含“startDate”属性的“事件”对象数组。我编写了一个自定义过滤器“occurrenceToday”，它预期会返回一个startDate属性与过滤器函数中定义的“today”变量匹配的事件数组。下面的代码是我试图测试我的自定义过滤器。没有事件显示，但有预期的匹配。控制台中也没有引发错误。我错过了什么或误解？谢谢。为什么这个自定义的Angular过滤器没有返回任何预期的匹配？

JS：

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


myApp.filter('occursToday', function() { 
    return function (events) { 
    var today = new Date('12/1/2014'); 
    var filtered = []; 
    for (var i = 0; i < events.length; i++) { 
     var evnt = events[i]; 
     if (evnt.startDate === today) { 
     filtered.push(evnt); 
     } 
    } 
    return filtered; 
    }; 
}); 


myApp.controller('MainCtrl', function($scope){ 
    $scope.greeting = 'Hello world!'; 
    $scope.events = [ 
     {"name": "An Event", "venue": "A Park", "startDate": new Date('12/1/2014'), "startTime": new Date('12/1/2014'), "endDate": new Date('12/1/2014'), "endTime": new Date('12/1/2014'), "website": "www.example.org", "description":"Yada yada.", "details": "Blah blah."}, 
     {"name": "An Event", "venue": "A Park", "startDate": new Date('12/1/2014'), "startTime": new Date('12/1/2014'), "endDate": new Date('12/1/2014'), "endTime": new Date('12/1/2014'), "website": "www.example.org", "description":"Yada yada.", "details": "Blah blah."}, 
     {"name": "An Event", "venue": "A Park", "startDate": new Date('12/2/2014'), "startTime": new Date('12/2/2014'), "endDate": new Date('12/2/2014'), "endTime": new Date('12/2/2014'), "website": "www.example.org", "description":"Yada yada.", "details": "Blah blah."}, 
     {"name": "An Event", "venue": "A Park", "startDate": new Date('12/2/2014'), "startTime": new Date('12/2/2014'), "endDate": new Date('12/2/2014'), "endTime": new Date('12/2/2014'), "website": "www.example.org", "description":"Yada yada.", "details": "Blah blah."}, 
     {"name": "An Event", "venue": "A Park", "startDate": new Date('12/3/2014'), "startTime": new Date('12/3/2014'), "endDate": new Date('12/3/2014'), "endTime": new Date('12/3/2014'), "website": "www.example.org", "description":"Yada yada.", "details": "Blah blah."}, 
    ] 
});

HTML：

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 
    <head> 
    <meta charset="utf-8"> 
    <title>myApp</title> 
    <link rel="stylesheet" href="css/main.css"> 
    </head> 
    <body ng-controller="MainCtrl"> 

     <div class="upcoming_events"> 
     <h2>Today</h2> 
      <ul class="event_list"> 

      <li ng-repeat="event in events | occursToday"> 
       <div class="event"> 
       <div class="event_date"> 
        <span class="day_of_week">{{event.startDate | date: 'EEEE'}}</span><br> 
        {{event.startDate | date: 'mediumDate'}} 
       </div> 
       <div class="event_content"> 
        <a class="summary" href="#">{{event.name}}</a> 
        <time class="start-time">{{event.startTime | date: 'shortTime'}}</time> 
        – 
        <time class="end-time">{{event.endTime | date: 'shortTime'}}</time> 
        <a class="location" href="#">{{event.venue}}</a> 
       </div> 
       </div> 
      </li> 

      </ul> 
     </div>

来源

2014-12-03 metamas

您可能需要使用

 evnt.startDate.getTime() === today.getTime()

来源

2014-12-03 20:56:36 Scott

以上是我提供的代码正确的答案。然而，为了任何人的利益使用这个作为参考，我想澄清一下，如果两个Date对象在确切的时间点实例化，上述将只返回true。对于一个更一般的过滤器，它将匹配相同日期的Date对象，而不管一天中的哪个时间，所使用的条件必须是'if（evnt.startDate.getFullYear（）=== today.getFullYear（）&& evnt .startDate.getMonth（）=== today.getMonth（）&& evnt.startDate.getDate（）=== today.getDate（））' – metamas 2014-12-03 22:15:25

其实这并不完全正确。如果您将日期实例化为新日期（'12/25/2015'），则无论您创建日期为何，它都将初始化为2015年12月25日星期五00:00:00 GMT-0800（PST）。当以这种方式实例化时，hh：mm：ss默认不包含在内。 – Scott 2014-12-03 22:39:12

是的，没错。我的意思是，在上述代码的最终版本中，'today'变量将初始化为'today = new Date（）'，以便它自动匹配给定的一天，但'new Date（）'实例化一个时间下降到当前毫秒，而'evnt.startDate'将以上面描述的归零时间格式启动。所以我确实需要使用更冗长的条件来匹配日期。 – metamas 2014-12-08 20:36:31

为什么这个自定义的Angular过滤器没有返回任何预期的匹配？

回答

相关问题