angularJS:过滤 JSON 数据 w.r.t 日期范围

Question

我对 AngularJS 完全陌生。这是我的 HTML 代码

<div ng-controller="DateRangeCtrl">

      <div class="container">
        <div class="form-horizontal">
          <input type="text" datepicker-popup="MM-dd-yyyy" ng-model="dt1" is-open="opened1" max="maxFromDate" ng-change="setMinToDate()"/>
          <button class="btn btn-sm" ng-click="open1($event)"><span class="glyphicon glyphicon-calendar"></span></button>
        </div>
        <div class="form-horizontal">
            <input type="text" datepicker-popup="MM-dd-yyyy" ng-model="dt2" is-open="opened2" min="minToDate" max="maxToDate" ng-change="filterDateAdded()"/>
            <button class="btn btn-sm" ng-click="open2($event)"><span class="glyphicon glyphicon-calendar"></span></button>
        </div>

        <p><strong>Selected From Date: </strong> {{dt1 | date:'mediumDate'}}</p>
        <p><strong>Selected To Date: </strong> {{dt2 | date:'mediumDate'}}</p>
      </div>
      <hr />
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>Date Added</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="item in items | orderBy:mySortFunction ">
            <td>{{item.ID}}</td>
            <td>{{ parseDate(item.dateAdded) | date:'longDate'}}</td>
          </tr>
        </tbody>
      </table>

    </div>

以下是我的 Angular 代码:

testApp.config(function (datepickerConfig, datepickerPopupConfig) {
          datepickerConfig.showWeeks = false;
          datepickerPopupConfig.showButtonBar = false;
    });  

    testApp.controller('DateRangeCtrl', function($scope) {

        $scope.items = [
          {ID: "1", dateAdded: "01-04-2013"},
          {ID: "2", dateAdded: "12-01-2013"},
          {ID: "3", dateAdded: "12-31-2013"},
          {ID: "4", dateAdded: "01-12-2014"},
          {ID: "5", dateAdded: "03-04-2014"}

        ];

        $scope.parseDate = function(input){
            var parts = input.split('-');
            var newParts = new Date(parts[2], parts[0]-1, parts[1]); // Note: months are 0-based
            return newParts;
        }


        $scope.open1 = function($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened1 = true;
       };

      $scope.maxFromDate = new Date();

      $scope.maxToDate = new Date();

      $scope.setMinToDate = function (){
        $scope.dt2 = null;
        $scope.minToDate = $scope.dt1;
      };

      $scope.open2 = function($event) {
      $event.preventDefault();
      $event.stopPropagation();

      $scope.opened2 = true;
      };
    });

如何根据所选日期过滤行？例如如果我在“From” datePicker中选择“01/01/2014”，那么我应该能够看到“添加日期”列的值大于“2014年1月1日”的所有行。输出将是 ID 为 4 和 5 的行。

当选择“收件人”日期选择器时，它的行为应该与字面意思相同

请帮帮我。我被困住了!

更新: HTML

<tr ng-repeat="item in items | filter:dateFilter ">

JS

$scope.dateFilter = function (item) {
          return (item.dateAdded < $scope.dt2);
      };

我做错了什么吗？还是不行....

Answer 1

通过一些尝试方法，我最终得到了正确的结果。问题是“item.dateAdded”字符串必须转换为 Date 对象。解决方案是在js文件中添加以下代码:

$scope.filterDateAdded = function (){
if($scope.dt1 != null)
{
  $scope.dateFilter = function (item) {
    return ($scope.parseDate(item.dateAdded) >= $scope.dt1 && $scope.parseDate(item.dateAdded) <= $scope.dt2);
  };
}

};

干杯!