Moment.js 的角度过滤日期（过去/未来）答案

【问题标题】：Angular Filter Dates (Past / Future) with Moment.jsMoment.js 的角度过滤日期（过去/未来）
【发布时间】：2015-04-08 23:26:59
【问题描述】：

假设我有 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 属性的名称是可配置的。

【问题讨论】：

标签： angularjs time momentjs angularjs-filter

【解决方案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'"

【讨论】：

谢谢！有没有办法概括过滤器，以便您可以指定日期键的名称？例如，假设每个对象都有date: '2015-04-11 10:00' 和deadline: '2015-04-12 10:00' 属性，并且您希望能够过滤这两个属性以应用某些类。这可能吗，还是您必须创建一个额外的（实际上相同的）过滤器？
@dougmacklin 你可以同时使用一个过滤器，我已经更新了答案。
感谢@flup！我有一个相关的后续问题，可能会在聊天中得到更好的回答，你介意检查一下吗？ chat.stackoverflow.com/rooms/74862/angular-date-filter

【解决方案2】：

更简单，在您的控制器中：

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

只需使用“2014-09-08T08:02:17-05:00”（ISO 8601）格式规范您的 event.date，您也可以使用 moment().format()

【讨论】：