AngularJS ngTable filtering by Date

Question

Sto provando ad impostare ngTable nella mia applicazione, ma non supporta il filtraggio per data, e non riesco a capire come implementarlo. Inizialmente avevo inserito la data nei miei dati come timestamp, che mi permetteva di ordinare la colonna correttamente a causa della natura incrementale di un timestamp, ma ovviamente non posso digitare September e filtrare i dati.

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

ho provato a installare in una stringa, ma quando si filtrare o ordinare non produce un ordine crescente/decrescente invece si tratta in modo è organizzato nei dati.

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

Ho cercato attraverso ngTable e abbiamo trovato ho potuto alterare l'intestazione della tabella, così ho preso una copia per modificare e aggiungere una sorta di filtro personalizzato o direttiva? Forse dovrei usare una stringa di date diversa? Ho creato un Plunker dell'app utilizzando i dati del timestamp, che viene filtrato per la visualizzazione all'utente e ordinabile, ma mi piacerebbe poter filtrare digitando il mese, il giorno e/o l'anno, ad es. 2014, settembre, ecc

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

UPDATE ho appena notato in fondo ngTable.js che si può cadere nei propri filtri. Alla fine ho capito come caricare un file esterno ad un filtro personalizzato invece di ngTemplates inlining:

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

o per posizionare il file in un luogo più utile nella vostra applicazione:

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

Ancora non è sicuro cosa fare, ma continuerò a provare a farlo funzionare, ho fatto un Plunker di quello che ho finora se questo mi aiuta. Dovrebbe essere una direttiva in date.html?

Answer 1

si potrebbe fare questo attraverso la definizione di un filtro personalizzato come questo:

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

io sono in grado di farlo in base alla data di filtraggio come text funzionalità sorta .La sta lavorando. Sotto è l'esempio di lavoro:

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>