我目前有一个使用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选项卡集成?
答案 0 :(得分:1)
过滤功能接受单个项目,而不是列表。尝试这样的事情:
$scope.upcomingEvents = function (obj) {
var date = new Date();
var eventDate = new Date(obj.date);
return eventDate >= date;
};
UPD:也不确定你是如何声明reverse
变量的。如果您想以相反的顺序对列表进行排序,只需将true
放在那里。