Question

我有一个2页用于过去活动，一个用于即将举办的活动。我想提出一个条件，以便我可以检查事件结束日期是否结束，然后在结束日期结束时在即将发生的事件页面上显示它，然后在过去事件页面上显示它。我想知道我该怎么做。

我检查过滤器选项，但我无法用它做。我也试过ng-if但隐藏了完整的部分。

我将在下面分享一些示例代码。

<h1>**Upcoming Events**</h1>
<div ng-repeat="_event in events">
  <div class="event-details pull-left">
    <p>{{_event.title}}</p>
  </div>
  <div class="event-date pull-left">
    <p> {{_event.startDate}} - {{_event.endDate}} </p>
  </div>
</div>

<h1>**Past Events**</h1>
<div ng-repeat="_event in events">
  <div class="event-details pull-left">
    <p>{{_event.title}}</p>
  </div>
  <div class="event-date pull-left">
    <p> {{_event.startDate}} - {{_event.endDate}} </p>
  </div>
</div>

Answer 1

在控制器中使用此功能

$scope.greaterThan = function(){
  var prop='endDate';
  var val=Date.now();
  return function(item){
    return new Date(item[prop]) < val;
  }
};

并在你的HTML中

ng-repeat="_event in events| filter:greaterThan()"

Answer 2

使用ng-if的示例：我在控制器中使用函数作为日期过滤器部分。

HTML部分：

<body ng-controller="AppController as app" class="container-fluid">

  <h2>**Upcoming Events**</h2>
  <div ng-repeat="_event in app.events" ng-if="app.checkUpcomingEvent(_event.endDate)">
    <div class="event-details pull-left">
      <p>{{_event.title}}</p>
    </div>
    <div class="event-date pull-left">
      <p> {{_event.startDate | date:'longDate'}} - {{_event.endDate | date:'longDate'}} </p>
    </div>
  </div>

  <h2>**Past Events**</h2>
  <div ng-repeat="_event in app.events" ng-if="app.checkPastEvent(_event.endDate)">
    <div class="event-details pull-left">
      <p>{{_event.title}}</p>
    </div>
    <div class="event-date pull-left">
      <p> {{_event.startDate | date:'longDate'}} - {{_event.endDate | date:'longDate'}} </p>
    </div>
  </div>

</body>

角度部分：

var app = angular.module('app', [])
.controller('AppController', function() {
      this.events = [
          {title: 'Event A', startDate: new Date('2017/08/1'), endDate: new Date('2017/08/2')},
         {title: 'Event B', startDate: new Date('2017/08/2'), endDate: new Date('2017/08/3')},
         {title: 'Event C', startDate: new Date('2017/08/3'), endDate: new Date('2017/08/4')},
         {title: 'Event D', startDate: new Date('2042/08/1'), endDate: new Date('2042/08/2')},
         {title: 'Event E', startDate: new Date('2042/08/2'), endDate: new Date('2042/08/3')},
         {title: 'Event F', startDate: new Date('2042/08/3'), endDate: new Date('2042/08/4')},
      ];

      this.checkPastEvent= function(endDate) { 
          return endDate < Date.now() ;
      }

      this.checkUpcomingEvent= function(endDate) { 
          return endDate > Date.now();
      }


});
angular.bootstrap(document, ['app']);

在jsfiddle上运行示例：https://jsfiddle.net/upq4t2hz/

如果未通过结束日期，Angularjs将显示事件

2 个答案: