angularjs - 使用 Moment.js 的 Angular 过滤日期(过去/ future )

Question

假设我有这样的对象的 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>

我将如何创建一个过滤器来只显示 future 的事件并隐藏过去的事件(将 event.date 与当前时间进行比较)？通常我会使用 Moment's .isBefore() .

更新:

我想要 date的名字属性可配置。

Answer 1

是的。您应该使用 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'"