AngularJS ngTable lọc theo Ngày

Question

Tôi đang cố gắng thiết lập ngTable trong ứng dụng của mình, nhưng nó không hỗ trợ lọc theo Ngày và tôi không thể tìm ra cách triển khai nó. Ban đầu tôi đã có ngày trong dữ liệu của tôi dưới dạng dấu thời gian, cho phép tôi sắp xếp cột đúng do bản chất tăng dần của dấu thời gian, nhưng rõ ràng là tôi không thể nhập tháng 9 và lọc dữ liệu.

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

Tôi đã thử đặt nó thành chuỗi, nhưng khi bạn lọc hoặc sắp xếp nó không tạo ra thứ tự asc/desc thay vào đó nó được sắp xếp theo thứ tự dữ liệu.

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

Tôi đã xem qua ngTable và thấy rằng tôi có thể thay đổi tiêu đề của bảng, vì vậy tôi đã lấy một bản sao để chỉnh sửa và thêm một số loại bộ lọc hoặc chỉ thị tùy chỉnh? Có lẽ tôi nên sử dụng một chuỗi ngày khác nhau? Tôi đã tạo một Plunker của ứng dụng bằng cách sử dụng dữ liệu dấu thời gian, được lọc để hiển thị cho người dùng và có thể sắp xếp, nhưng tôi muốn có thể lọc bằng cách nhập tháng, ngày và/hoặc năm, tức là. 2014, tháng chín vv

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

CẬP NHẬT Tôi chỉ nhận thấy ở dưới cùng của ngTable.js rằng bạn có thể thả trong các bộ lọc của riêng bạn. Tôi cuối cùng đã tìm ra cách để tải một tập tin bên ngoài để một bộ lọc tùy chỉnh thay vì ngTemplates nội tuyến:

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

hoặc để đặt các tập tin trong một nơi hữu ích hơn trong ứng dụng của bạn:

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

Vẫn không chắc chắn phải làm gì, nhưng sẽ tiếp tục cố gắng để có được điều này làm việc, tôi thực hiện một Plunker của những gì tôi có cho đến nay nếu điều đó giúp. Đây có phải là chỉ thị trong date.html không?

Answer 1

Bạn có thể làm điều này bằng cách định nghĩa một bộ lọc tùy chỉnh như thế này:

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

tôi có thể làm điều đó theo ngày lọc như text .Công chức năng loại cũng đang làm việc. Dưới đây là ví dụ làm việc:

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>