Дата фильтр Диапазона в нг-таблице angularjs

Question

Я использую angularjs нг-таблицу для отображения данных с помощью зрения Джанго и пытаемся добавить фильтр начального загрузки диапазона дат в нг-таблице, но она показывает следующее сообщение об ошибке: -

Error: [$injector:unpr] Unknown provider: dateRangeFilterFilterProvider <- dateRangeFilterFilter

Я хочу добавить фильтр диапазона дат, чтобы я мог искать данные в соответствии с этим. Фильтр видимый, но получение вышеуказанной ошибки и фильтрация не происходит. Я застрял и не получаю, где я делаю неправильно. Было бы здорово, если бы кто-то помог мне с этим.

app.js

(function() { 
    'use strict'; 

    var myapp = angular 
     .module('app.tables') 
     .controller('NGTableCtrl', NGTableCtrl); 

function parseDate(input) { 
       return Date.parse(input); 
      } 

      myapp.filter("dateRangeFilter", function() { 
      return function(items, from, to) { 
        var df = parseDate(from); 
        var dt = parseDate(to); 
        var result = [];   
        for (var i=0; i<items.length; i++){ 
         var date_bet = items[i].datetime; 
         if (date_bet > df && dt > date_bet) { 
          result.push(items[i]); 
         } 
        } 
        return result; 
      }; 
      }); 

    NGTableCtrl.$inject = ['$filter', '$http', 'ngTableParams', '$resource', '$timeout', 'ngTableDataService']; 
    function NGTableCtrl($filter, $http, ngTableParams, $resource, $timeout, ngTableDataService) { 
     var vm = this; 
     vm.title = 'Controller'; 

     activate(); 





     function activate() { 
      vm.today = function() { 
       vm.dt2 = new Date(2015,11,26); 
       vm.dt1 = new Date(2015,11,17); 

       };  

       vm.today(); 
       vm.toggleMin = function() { 
       vm.minDate = vm.minDate ? null : new Date(); 
       }; 
       vm.toggleMin(); 
       vm.maxDate = new Date(2020, 5, 22); 

       vm.open1 = function($event) { 
       vm.status1.opened = true; 
       }; 

       vm.open2 = function($event) { 
       vm.status2.opened = true; 
       }; 

       vm.setDate = function(year, month, day) { 
       vm.dt1 = new Date(year, month, day); 
       vm.dt2 = new Date(year, month, day); 

       }; 

       vm.dateOptions = { 
       formatYear: 'yy', 
       startingDay: 1 
       }; 

       vm.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
       vm.format = vm.formats[0]; 

       vm.status1 = { 
       opened: false 
       }; 

       vm.status2 = { 
       opened: false 
       }; 
        var tableData = []; 
        var ratingData = []; 

       vm.tableParams5 = new ngTableParams({ 
       page: 1, 
       count: 10, 
       sorting: { 
        image_url: 'asc', 
        title: 'asc', 
        seller_name: 'asc', 
        price: 'asc', 
        product_rating: 'asc', 
        vendor_rating: 'asc'  
       }, 
       filter: { 
        image_url: '', 
        title: '', 
        seller_name: '', 
        price: '', 
        product_rating: '', 
        vendor_rating: '' 

       } 
      },{ 
       total:tableData.length, 

       getData : function($defer,params){ 
        ngTableDataService.getData($defer, params); 
        $http.get('/reviews/').then(function(response) { 
         tableData = response.data.product_whole_data; 
         console.log(tableData); 

         var filteredData = params.filter() ? 
         $filter('filter')(tableData, params.filter()) : 
         tableData; 

         var orderedData = params.sorting() ? 
          $filter('orderBy')(filteredData, params.orderBy()) : 
          filteredData; 
          params.total(orderedData.length); 

         $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 

        }); 
       } 


      }); 

HTML

<div class="panel panel-default"> 

     <h4>From Date</h4> 
     <p class="input-group"> 
     <input type="text" uib-datepicker-popup="{{table.format}}" ng-model="table.dt1" is-open="table.status1.opened" max-date="'table.maxDate'" datepicker-options="table.dateOptions" date-disabled="table.disabled(date, mode)" ng-required="true" 
     close-text="Close" class="form-control" /> 
     <span class="input-group-btn"> 
      <button type="button" ng-click="table.open1($event)" class="btn btn-default"> 
       <em class="fa fa-calendar"></em> 
      </button> 
     </span> 
     </p> 
     <h4>To Date</h4> 
     <p class="input-group"> 
     <input type="text" uib-datepicker-popup="{{table.format}}" ng-model="table.dt2" is-open="table.status2.opened" max-date="'table.maxDate'" datepicker-options="table.dateOptions" date-disabled="table.disabled(date, mode)" ng-required="true" 
     close-text="Close" class="form-control" /> 
     <span class="input-group-btn"> 
      <button type="button" ng-click="table.open2($event)" class="btn btn-default"> 
       <em class="fa fa-calendar"></em> 
      </button> 
     </span> 
     </p> 
     <table ng-table="table.tableParams5" class="table" show-filter="true"> 
     <tbody> 
      <tr ng-repeat="product_whole_data in $data | dateRangeFilter:dt1:dt2"> 
       <td data-title="'Channel'" filter="{ 'channel_name': 'text' }" sortable="'channel_name'" class="text-center">{{product_whole_data.channel_name}}</td> 
       <td data-title="'Image'" filter="{ 'image_url': 'text' }" sortable="'image_url'"><div class="media"><img src="{{product_whole_data.image_url}}" alt="Image" class="media-box-object img-responsive img-rounded thumb64"></div></td> 
       <td data-title="'Product Name'" filter="{ 'title': 'text' }" sortable="'title'" class="text-center">{{product_whole_data.title}}</td> 
       <td data-title="'Seller Name'" filter="{ 'seller_name': 'text' }" sortable="'seller_name'" class="text-center">{{product_whole_data.seller_name}}</td> 
       <td data-title="'Price'" filter="{ 'price': 'text' }" sortable="'price'" class="text-center">{{product_whole_data.price}}</td> 
       <td data-title="'Product Rating'" filter="{ 'product_rating': 'text' }" sortable="'product_rating'" class="text-center">{{product_whole_data.product_rating}}</td> 
       <td data-title="'Vendor Rating'" filter="{ 'vendor_rating': 'text' }" sortable="'vendor_rating'" class="text-center">{{product_whole_data.vendor_rating}}</td> 

      </tr> 
     </tbody> 
     </table> 
    </div> 

Answer 1

Обновлено: Вместо того, чтобы создать функцию, чтобы вернуть разобранную дату, просто вызовите Date.parse() непосредственно

Это потому, что вы создали свой фильтр внутри ваш контроллер.

var myapp = angular 
      .module('app.tables') 
      .controller('NGTableCtrl', NGTableCtrl); 

      // your filter should be here 
      myapp.filter("dateRangeFilter", function() { 
       return function(items, from, to) { 
        var df = Date.parse(from); 
        var dt = Date.parse(to); 
       }; 
      }); 

     NGTableCtrl.$inject = ['$filter', '$http', 'ngTableParams', '$resource', '$timeout', 'ngTableDataService']; 
     function NGTableCtrl($filter, $http, ngTableParams, $resource, $timeout, ngTableDataService) { 
    // your existing code 
    }