AngularJS ngTable按日期过滤

Question

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

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

我试图将其设置为一个字符串，但是当你过滤或排序也不会产生一个递增/递减顺序，而不是它有它在数据组织顺序。

// 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年，月，等

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

UPDATE 我只注意到在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 .The排序功能也工作。下面是工作示例：

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>