我目前有使用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选项卡集成?

最佳答案

筛选器功能接受单个项目,而不是列表。尝试这样的事情:

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


UPD:同样不确定您声明reverse变量的精确程度。如果要以相反的顺序对列表进行排序,只需将true放在此处。

关于javascript - Angular –通过重复过滤过去和将来的事件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30091403/

10-11 13:15