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

发布时间：2020-12-17 17:25:01 所属栏目：安全来源：网络整理

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

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

更新：

我想要配置日期属性的名称.

解决方法

是.您应该使用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’]相同.
第二个技巧是你可以使用||为参数提供默认值.参数|| ‘default’将使用param值(如果提供),如果未定义则使用’default’.

所以

.filter('isFuture',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'"

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!