Question

我试图在我的应用程序中设置ngTable，但它不支持按日期过滤，我无法弄清楚如何实现它。我最初将数据中的日期作为时间戳，这使得我可以根据时间戳的增量性质对列进行正确排序，但显然我不能键入9月并过滤数据。

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

按日期过滤AngularJS ngTable

2 个答案: