2015-06-04 21 views
5

Sto tentando di applicare un filtro dell'intervallo di date su Smart Table angolare (http://lorenzofox3.github.io/smart-table-website/), tuttavia, non sono stato in grado di farlo. L'unico esempio che vedo online è il seguente: http://plnkr.co/edit/Idbc1JNHKylHuX6mNwZ6?p=preview anch'esso rotto.Intervallo di date con il filtro Smart Table angolare

Questo è il mio HTML:

<div st-table="releaseListDisplay" st-safe-src="releaseList"> 
     <div class="filter-box"> 
      <st-date-range></st-date-range> 
     </div> 
     <table class="list-page"> 
      <thead> 
       <tr> 
        <th st-sort="releaseNum">Release#</th> 
        <th class="p15">Product Name</th> 
        <th st-sort="dateInternalRelease">Int. Release Date</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="release in releaseListDisplay"> 
        <td>{{release.releaseNum}}</td> 
        <td>{{release.buildNum}}</td> 
        <td>{{release.dateInternalRelease | date:'yyyy-MM-dd'}</td> 

       </tr> 
      </tbody> 
      <tfoot> 
       <tr> 
        <td colspan="9"> 
         <div st-pagination="" st-items-by-page="10"></div> 
        </td> 
       </tr> 
      </tfoot> 
     </table> 
    </div> 

Questo è il contenuto del file template.html di direttiva st-date-range:

<label for="fromdate">From:</label> 
<input type="date" name="fromdate" id="fromdate" 
     placeholder="MM/DD/YYYY" ng-model="fromDate"/> 
<label for="todate">To:</label> 
<input type="date" name="todate" id="todate" 
     placeholder="MM/DD/YYYY" ng-model="toDate"/> 

e questa è la direttiva:

app.directive('stDateRange', function($timeout){ 
return{ 
    restrict:'E', 
    require:'^stTable', 
    templateUrl:'template.html', 
    scope:false, 
    link: function(scope,element,attr,ctrl){ 
     var tableState = ctrl.tableState(); 
     scope.$watchGroup(["fromDate","toDate"], 
       function(newValues,oldValues){ 

        if(newValues){ 
         var start = newValues[0]; 
         var end = newValues[1]; 
         if(start && end){ 
          var d1 = new Date(start); 
          var d2 = new Date(end); 
          ctrl.search({after:d1.getTime(),before:d2.getTime()},'dateInternalRelease'); 

         } 
        } 

       } 
     ); 
    } 
}; 

});

Ho anche provato a utilizzare $ filtro per filtrare i record in releaseList utilizzando la funzione comparatore, ma poi si interrompe l'impaginazione di Smart Table.

Ho davvero bisogno di un aiuto rapido qui. Grazie mille!

+0

il primo collegamento plunker che hai postato in OP funziona per me – Serge

+0

ma è veramente rotto con gli ultimi angularjs/angular-ui-bootstrap – Serge

risposta

3

Distacco la mia soluzione in caso qualcuno lo trova utile:

avevo bisogno di creare un filtro personalizzato come qui sotto e poi utilizzarlo nel modello di vista come: st-set-filter = "CustomFilter"

app.filter('customFilter', ['$filter', function ($filter) { 
      var filterFilter = $filter('filter'); 
      var standardComparator = function standardComparator(obj, text) { 
       text = ('' + text).toLowerCase(); 
       return ('' + obj).toLowerCase().indexOf(text) > -1; 
      }; 

      return function customFilter(array, expression) { 
       function customComparator(actual, expected) { 
        var isBeforeActivated = expected.before; 
        var isAfterActivated = expected.after; 
        var higherLimit, lowerLimit; 
        var itemDate, queryDate; 

        if (angular.isObject(expected)) { 
         //date range 
         if (expected.before || expected.after) { 
          try { 
           if (isBeforeActivated) { 
            higherLimit = expected.before; 
            itemDate = new Date(actual); 
            queryDate = new Date(higherLimit); 

            //if (actual > higherLimit) { 
            if (itemDate > queryDate) { 
             return false; 
            } 
           } 

           if (isAfterActivated) { 
            lowerLimit = expected.after; 
            itemDate = new Date(actual); 
            queryDate = new Date(lowerLimit); 

            //if (actual < lowerLimit) { 
            if (itemDate < queryDate) { 
             return false; 
            } 
           } 

           return true; 
          } catch (e) { 
           return false; 
          } 

         } 

         return true; 
        } 
        return standardComparator(actual, expected); 
       } 

       var output = filterFilter(array, expression, customComparator); 
       return output; 
      }; 
     }]); 
Problemi correlati