我正在使用 angularjs ng-tables 通过 django 视图显示数据并尝试在 ng-table 中添加引导日期范围过滤器，但它显示以下错误：-
错误：[$injector:unpr] 未知提供者：dateRangeFilterFilterProvider <- dateRangeFilterFilter
我想添加日期范围过滤器，以便我可以根据它搜索数据。过滤器可见，但出现上述错误并且未发生过滤。我被卡住了，没有找到我做错的地方。如果有人可以帮助我，那就太好了。
应用程序.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>