Angular 使用 Moment.js 过滤日期(过去/未来)
Angular Filter Dates (Past / Future) with Moment.js
假设我有 JSON 数据,对象如下:
$scope.events = [
{
title: 'Event 1',
date: '2015-04-11 10:00'
},
...
];
然后我使用 ng-repeat
:
显示它
<ul>
<li ng-repeat="event in events">{{event.title}}</li>
</ul>
我如何创建过滤器以仅显示未来事件并隐藏过去事件(将 event.date 与当前时间进行比较)?通常我会使用 Moment's .isBefore().
更新:
我希望 date
属性 的名称可以配置。
是的。您应该使用 Moment 的 isAfter
方法定义自定义过滤器。
可以在 http://onehungrymind.com/build-custom-filter-angularjs-moment-js/
上找到示例
他们对过滤器的定义,他们甚至可以配置截止日期:
.filter('isAfter', function() {
return function(items, dateAfter) {
// Using ES6 filter method
return items.filter(function(item){
return moment(item.date).isAfter(dateAfter);
})
}
})
或者如果您不想使其可配置:
.filter('isFuture', function() {
return function(items) {
return items.filter(function(item){
return moment(item.date).isAfter(new Date());
})
}
})
要应用它:
ng-repeat="event in events | isAfter:date"
或
ng-repeat="event in events | isFuture"
更新:
您想使日期的名称 属性 可配置。你可以这样做。调用它的技巧是 item.date
与 item['date']
相同。
第二个技巧是您可以使用 ||
为参数提供默认值。如果提供 param || 'default'
将使用参数值,如果未定义则使用 'default'
。
所以
.filter('isFuture', function() {
return function(items, dateFieldName) {
return items.filter(function(item){
return moment(item[dateFieldName || 'date']).isAfter(new Date());
})
}
})
然后在 ng-repeat 中得到默认值:
ng-repeat="event in events | isFuture"
或指定字段名称:
ng-repeat="event in events | isFuture:'deadline'"
更简单,在你的控制器中:
$scope.now = moment().format(); //normalised format (ISO 8601)
在您看来
<ul>
<li ng-repeat="event in events">
<span ng-if="event.date > now">{{event.title}}<span>
</li>
</ul>
只需将 event.date 规范化为“2014-09-08T08:02:17-05:00” (ISO 8601) 格式,您也可以使用 moment().format()
假设我有 JSON 数据,对象如下:
$scope.events = [
{
title: 'Event 1',
date: '2015-04-11 10:00'
},
...
];
然后我使用 ng-repeat
:
<ul>
<li ng-repeat="event in events">{{event.title}}</li>
</ul>
我如何创建过滤器以仅显示未来事件并隐藏过去事件(将 event.date 与当前时间进行比较)?通常我会使用 Moment's .isBefore().
更新:
我希望 date
属性 的名称可以配置。
是的。您应该使用 Moment 的 isAfter
方法定义自定义过滤器。
可以在 http://onehungrymind.com/build-custom-filter-angularjs-moment-js/
他们对过滤器的定义,他们甚至可以配置截止日期:
.filter('isAfter', function() {
return function(items, dateAfter) {
// Using ES6 filter method
return items.filter(function(item){
return moment(item.date).isAfter(dateAfter);
})
}
})
或者如果您不想使其可配置:
.filter('isFuture', function() {
return function(items) {
return items.filter(function(item){
return moment(item.date).isAfter(new Date());
})
}
})
要应用它:
ng-repeat="event in events | isAfter:date"
或
ng-repeat="event in events | isFuture"
更新:
您想使日期的名称 属性 可配置。你可以这样做。调用它的技巧是 item.date
与 item['date']
相同。
第二个技巧是您可以使用 ||
为参数提供默认值。如果提供 param || 'default'
将使用参数值,如果未定义则使用 'default'
。
所以
.filter('isFuture', function() {
return function(items, dateFieldName) {
return items.filter(function(item){
return moment(item[dateFieldName || 'date']).isAfter(new Date());
})
}
})
然后在 ng-repeat 中得到默认值:
ng-repeat="event in events | isFuture"
或指定字段名称:
ng-repeat="event in events | isFuture:'deadline'"
更简单,在你的控制器中:
$scope.now = moment().format(); //normalised format (ISO 8601)
在您看来
<ul>
<li ng-repeat="event in events">
<span ng-if="event.date > now">{{event.title}}<span>
</li>
</ul>
只需将 event.date 规范化为“2014-09-08T08:02:17-05:00” (ISO 8601) 格式,您也可以使用 moment().format()