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

时间:2014-12-03 20:48:22

标签: javascript html angularjs

我有一个"事件"包含" startDate"的对象属性。我已经编写了一个自定义过滤器," happenToday",预计将返回一个事件数组,这些事件的startDate属性与"今天"匹配。过滤函数中定义的变量。下面的代码是我尝试测试自定义过滤器。没有显示任何事件,但有预期的匹配。控制台中也没有抛出任何错误。我错过了什么或误解了什么?谢谢。

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> 

1 个答案:

答案 0 :(得分:1)

您可能需要使用

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