angularjs ng-repeat与日期范围

Question

我正在尝试使用ui-bootstrap datepicker过滤一个只包含日期范围内条目的列表：

当我第一次加载页面时，过滤器工作正常，但是当我更改日期选择器中的日期时，将不会显示任何条目。如何通过具有新日期范围的过滤器传递数据？

我的自定义过滤器：

angular.module('reklaApp')
.filter('dateFilter', function () {
return function (items, fromDate, toDate) {

    var filtered = [];

    for (var i = 0; i < items.length; i++) {

        var item = items[i];

        if (item.dt > fromDate && item.dt < toDate){
            filtered.push(item);
        }
    }

    return filtered;
};
});

我的模特：

var ReklaSchema = new Schema({
 dt: Date,
 order: Number,
});

我的观点：

    <div class="form-group">
      <span class="input-group">
        <input type="text" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="fromDate" is-open="datepickers.fromDate" min-date="" max-date="maxDate" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
        <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="open($event,'fromDate')"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
      </span>
    </div>
    &nbsp;bis&nbsp;
    <div class="form-group">
      <span class="input-group">
        <input type="text" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="toDate" is-open="datepickers.toDate" min-date="" max-date="maxDate" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
        <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="open($event,'toDate')"><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
      </span>
    </div>

我对过滤器的看法：

    <tr ng-repeat="rekla in reklas | dateFilter:fromDate:toDate">
      <td>{{rekla.dt | date: 'dd.MM.yyyy'}}</td>
      <td>{{rekla.order}}</td>
    </tr>

我的控制器：

angular.module('reklaApp')
 .controller('MainCtrl', function ($scope, $http, Reklas, Modal) {

    $scope.newRekla = {};
    $scope.reklas = {};

    $scope.fromDate = '2015-03-31T22:00:00.000Z';
    $scope.toDate = '2015-04-30T22:00:00.000Z';

    Reklas.getAll()
      .success(function(data) {
        $scope.reklas = data;
    });

更新

我认为问题是datepicker的数据类型！？

Datepicker数据：

模型数据：

Answer 1

您可以在ng-change上调用过滤器并在模型上应用过滤器，如下所示：

<input type="text" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="toDate" is-open="datepickers.toDate" min-date="" max-date="maxDate" date-disabled="disabled(date, mode)" ng-required="true" ng-change="filterDate()" close-text="Close" />

并在控制器js中创建方法filterDate()，如下所示：

$scope.filterDate=function(){
    $scope.toDate=$filter('dateFilter')($scope.toDate);
}