ng-table angularjs中的日期范围过滤器

Date range filter in ng-table angularjs

本文关键字:范围 过滤器 日期 angularjs ng-table      更新时间:2023-09-26

我正在使用angularjs ng-tables通过django视图显示数据,并试图在ng-table中添加bootstrap日期范围过滤器,但它显示以下错误:-

错误:[$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()));
                    });
                }

            });

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

更新:只需直接调用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
    }