javascript - Angular – 通过重复过滤过去和 future 的事件

Question

我目前有一个使用 ng-repeat 显示的事件列表。

<div class="container">
  <h1 class="center">Events</h1>
  <tabset>
    <tab heading="Upcoming Events">
      <ul class="events">
        <li class="event" ng-repeat="event in events | filter:upcomingEvents | orderBy:'date':reverse">
          <div class="row">
            <div class="col-md-2 col-md-offset-2 col-sm-2 col-sm-offset-0 col-xs-3">
              <div class="square">
                <p class="month">{{event.date | date:'MMM'}} &#39;{{event.date | date:'yy'}}</p>
                <p class="date">{{event.date | date:'d'}}</p>
                <p class="day">{{event.date | date:'EEE'}}</p>
              </div>
            </div>
            <div class="col-md-8 col-sm-6 col-xs-9">
              <h1 class="name">{{event.name}}</h1>
              <p class="time">{{event.time}}</p>
              <p class="info">
                {{event.info}}
                <a ng-if="event.link" ng-href="{{event.link}}">more info</a>
              </p>
            </div>
            <div class="col-sm-3 col-xs-12">
            </div>
          </div>
          <ui-gmap-google-map style="height: 200px;"center="[event.lat, event.lng ]" zoom='15' options='options'>
            <ui-gmap-marker idkey="event.venue" coords="[event.lat, event.lng ]">
            </ui-gmap-marker>
          </ui-gmap-google-map>
          <hr ng-show="! $last">
        </li>
      </ul>
    </tab>
  </tabset>
</div>

我有一个这样的过滤器设置:

$scope.upcomingEvents = function (objects) {
    var filtered_list = [];
    for (var i = 0; i < objects.length; i++) {
        var date = new Date();
        var eventDate = new Date(objects[i].date);
        if (eventDate >= date) {
            filtered_list.push(objects[i]);
        }
    }
    return filtered_list;
};

这目前不起作用。这是怎么回事？另外，是否有更好的方法将此类功能与 Bootstrap 选项卡集成？

Answer 1

过滤器函数接受单个项目，而不是列表。尝试这样的事情:

$scope.upcomingEvents = function (obj) {
    var date = new Date();
    var eventDate = new Date(obj.date);
    return eventDate >= date;
};

UPD:也不确定您到底是如何声明 reverse 变量的。如果您想以相反的顺序对列表进行排序，只需将 true 放在那里即可。