使用Moment.js的角度过滤日期(过去/未来)

时间:2015-04-08 23:26:59

标签: angularjs time momentjs angularjs-filter

假设我有像这样的对象的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属性的名称可以配置。

2 个答案:

答案 0 :(得分:4)

是。您应该使用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.dateitem['date']相同。 第二个技巧是您可以使用||为参数提供默认值。 param || 'default'将使用param值(如果已提供),'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'"

答案 1 :(得分:1)

更简单,在您的控制器中:

$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>

使用&#34; 2014-09-08T08:02:17-05:00&#34;将您的event.date规范化。 (ISO 8601)格式,您也可以使用moment().format()