我目前有使用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'}} '{{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/