AngularJS ngTable按日期筛选

Question

我正在尝试在我的应用程序中设置ngTable，但它不支持按日期过滤，我也不知道如何实现它。我最初将数据中的日期作为时间戳，由于时间戳的增量性质，这使我能够对列进行正确排序，但显然我无法键入September并过滤数据。

// Example row data from data array
{
  "index": 0,
  "id": "54587313ac91d561b246bf90",
  "user": "user3",
  "date": 1390054873445,
  "status": "in-progress"
}

我试着把它设置为字符串，但当你过滤或排序时，它不会产生asc/desc顺序，而是按数据中的顺序排列。

// Date output not in asc/desc if use date string
September 8, 2014
September 27, 2014
September 23, 2014
September 26, 2014

我一直在查看ngTable，发现我可以更改表的标题，所以我获取了一个副本来编辑并添加某种自定义过滤器或指令？也许我应该使用不同的日期字符串？我使用时间戳数据创建了一个应用程序的Plunker，它被过滤以显示给用户并可排序，但我希望能够通过键入月份、日期和/或年份进行过滤，即2014年、9月等。

// Example date column setup
<td data-title="'Date'" 
    sortable="'date'" 
    filter="{ 'date': 'text' }"
    ng-bind="(doc.date | date:mediumDate)"></td>

更新我刚刚在ngTable.js的底部注意到，您可以放入自己的过滤器。我最终找到了如何将外部文件加载到自定义过滤器，而不是内联Templates:

<td data-title="'Date'" 
    sortable="'date'" 
    filter="{ 'date': 'date' }" // add name of filter (date), to the value of assoc array
    ng-bind="(loan.date | date:mediumDate)"></td>

或者将文件放在应用程序中更有用的位置：

<td data-title="'Date'" 
    sortable="'date'" 
    filter="{ 'date': 'date', templateURL: '/www/app/ng-table/filters/date.html' }"
    ng-bind="(loan.date | date:mediumDate)"></td>

我仍然不知道该怎么办，但会继续努力，如果有帮助的话，我会把我目前所拥有的做一个Plunker。这应该是date.html中的指令吗？

Answer 1

您可以通过定义这样的自定义过滤器来实现这一点：

angular.module("tableApp", ['ngTable'])
.filter('customUserDateFilter', function($filter) {
    return function(values, dateString) {
     var filtered = [];
  
      if(typeof values != 'undefined' && typeof dateString != 'undefined') {
        angular.forEach(values, function(value) {
            if($filter('date')(value.Date).indexOf(dateString) >= 0) {
              filtered.push(value);
            }
          });
      }
      
      return filtered;
    }
})
.controller("MyCtrl", function($scope, $filter, ngTableParams) {
  var data = [
    { Name: 'John', Date: new Date('1/1/2014') },
    { Name: 'Doe', Date: new Date('1/2/2014') },
    { Name: 'Jane', Date: new Date('2/1/2014') }
  ];
  
    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
    }, {
        total: data.length, // length of data
        getData: function($defer, params) {
            // use build-in angular filter
            var filters = params.filter();
            var tempDateFilter;
            
            var orderedData = params.sorting() ?
                            $filter('orderBy')(data, params.orderBy()) :
                            data;
            if(filters) {
              if(filters.Date) {
                orderedData = $filter('customUserDateFilter')(orderedData, filters.Date);
                tempDateFilter = filters.Date;
                delete filters.Date;
              }
              orderedData = $filter('filter')(orderedData, filters); 
              filters.Date = tempDateFilter;
            }
            $scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
            params.total(orderedData.length); // set total for recalc pagination
            $defer.resolve($scope.users);
        }
    });
  })

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.ngtable/0.3.3/ng-table.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.ngtable/0.3.3/ng-table.css" />
<div ng-app="tableApp" ng-controller="MyCtrl">
  <table ng-table="tableParams" show-filter="true" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'" filter="{ 'Name': 'text' }" sortable="'Name'">
                {{user.Name}}
            </td>
            <td data-title="'Date'" filter="{ 'Date': 'text' }" sortable="'Date'">
                {{user.Date | date}}
            </td>
        </tr>
    </table>
</div>

Answer 2

我可以通过将日期过滤为text来完成。排序功能也在工作。以下是工作示例：

angular.module("tableApp", ['ngTable'])
.controller("MyCtrl", function($scope, NgTableParams) {
  $scope.data = [
    { Name: 'John', Date: new Date('2/1/2019') },
    { Name: 'Doe', Date: new Date('1/2/2014') },
    { Name: 'Jane', Date: new Date('1/1/2014') },
    { Name: 'Karthik', Date: new Date('3/1/2017') }
  ]; 
  $scope.tableParams = new NgTableParams({}, {dataset:$scope.data});
})

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.ngtable/1.0.0/ng-table.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/angular.ngtable/1.0.0/ng-table.css" />
<div ng-app="tableApp" ng-controller="MyCtrl">
  <table ng-table="tableParams" show-filter="true" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'" filter="{ 'Name': 'text' }" sortable="'Name'">
                {{user.Name}}
            </td>
            <td data-title="'Date'" filter="{ 'Date': 'text' }" sortable="'Date'">
                {{user.Date | date}}
            </td>
        </tr>
    </table>
</div>