使用MEAN堆栈基于日期过滤表数据... AngularJS,MongoDB,Mongoose

时间:2014-11-19 02:27:47

标签: angularjs mongodb date filter html-table

我已经使用表单添加到MondoDB中的事件。我显示了一个事件列表,但是需要按日期过滤所有事件,以便只显示将来的事件(我还有另一个表用于过去的事件)。我的所有尝试,下面最好的一次,都没有在我的桌子上产生任何事件。我认为日期格式或模式与表单中的格式不兼容,但我是菜鸟,所以我知道什么。这里有尽可能多的代码,我认为这可能是整个拼图的必要条件。

架构:

'use strict';

var mongoose = require('mongoose'),
Schema = mongoose.Schema;

var EventSchema = new Schema({
    startDate: { type: Date, required: false }
});

mongoose.model('Event', EventSchema);

形式:

<section data-ng-controller="EventsController">
  <p class="page-title">create a new event</p> 
  <form style="float:none; left:25%" name="eventForm" class="form-horizontal col-md-6" role="form" data-ng-submit="create(eventForm.$valid)" novalidate>
    <div class="form-group" ng-class="{ 'has-error' : submitted && eventForm.date.$invalid }">
      <label for="date" class="col-md-3 control-label">Date</label>
      <div class="col-md-4">
        <input name="date" type="date" id="date" placeholder="mm/dd/yyyy" class="form-control glowing-border" required>
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-offset-3 col-md-9">
        <button type="submit" class="btn btn-default">submit</button>
      </div>
    </div>
  </form>
</section>

我桌子的重要部分:

<div class="panel panel-default" data-ng-controller="EventsController" data-ng-init="find()">
    <table class="table table-hover table-striped">
        <thead>
        <tr>
            <th>Date</th>
        </tr>
        </thead>
        <tbody>
        <tr data-ng-repeat="event in events | filterList">
            <td>{{event.startDate}}</td>
        </tr>
        </tbody>
    </table>
</div>

我的带控制器和自定义过滤器的模块:

'use strict';

var app = angular.module('mean.events');
app.controller('EventsController', ['$scope', '$stateParams', '$location', 'Global', 'Events',
  function($scope, $stateParams, $location, Global, Events) {
    $scope.global = Global;

    $scope.create = function(isValid) {
      if (isValid) {
        var event = new Events({
          startDate: this.date
        });
        event.$save(function(response) {
          $location.path('events/' + response._id);
        });

        this.date = '';
      } else {
        $scope.submitted = true;
      }
    };


    $scope.find = function() {
      Events.query(function(events) {
        $scope.events = events;
      });
    };
  }
]);

app.filter('filterList', function() {
  return function(items) {
    var upcoming = [];

    angular.forEach(items, function(item){
      if(item.startDate >= new Date()) {
        upcoming.push(item);
      }
    });

    console.log(upcoming);
    return upcoming;
  };
});

1 个答案:

答案 0 :(得分:1)

问题确实源于插入到DB中的日期与新的Date()对象格式不同。为了解决这个问题,我将item.startDate传递给了新的Date()以使它们相同。这是工作过滤器:

app.filter('filterList', function() {
    return function(items) {
        var upcoming = [];

        angular.forEach(items, function(item){
          if ( new Date() > new Date(item.startDate) ) {
              upcoming.push(item);
          }
        });

        return upcoming;
    };
});