Bộ lọc phạm vi ngày sử dụng Bảng thông minh góc

Question

Tôi đang cố gắng áp dụng bộ lọc phạm vi ngày trên Bảng thông minh góc (http://lorenzofox3.github.io/smart-table-website/), tuy nhiên, tôi chưa thể thực hiện điều đó. Ví dụ duy nhất tôi thấy các điểm trực tuyến: http://plnkr.co/edit/Idbc1JNHKylHuX6mNwZ6?p=preview cũng bị hỏng.

Đây là HTML của tôi:

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

Đây là nội dung tập tin template.html cho thị st-phạm vi ngày:

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

Và đây là chỉ thị:

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'); 

         } 
        } 

       } 
     ); 
    } 
}; 

});

Tôi cũng đã thử sử dụng bộ lọc $ để lọc ra các bản ghi trong releaseList bằng cách sử dụng hàm so sánh nhưng sau đó ngắt bảng phân chia bảng thông minh.

Tôi thực sự cần trợ giúp nhanh ở đây. Cảm ơn nhiều!

Answer 1

gửi bài giải pháp của tôi trong trường hợp bất cứ ai tìm thấy nó hữu ích:

tôi cần thiết để tạo ra một bộ lọc tùy chỉnh như dưới đây và sau đó sử dụng nó trong giao diện mẫu như: 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; 
      }; 
     }]);