AngularJS ngTable 按日期过滤

Question

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

// 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 的底部，您可以放入自己的过滤器。我最终想出了如何将外部文件加载到自定义过滤器而不是内联 ngTemplates：

<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>