Angular 日期范围过滤器不起作用
Angular Date Range Filter Not Working
我正在尝试弄清楚为什么我的日期范围过滤器不起作用并且我收到错误 - [$injector:unpr] 未知提供程序:dateRangeProvider <- dateRange <- dashboardController。
我尝试将 'dateRange' 放入我的依赖项和 $filter 中,但不确定我所做的是否正确。非常感谢任何帮助!谢谢!
我的 HTML 我试图在两个日期之间进行过滤以获取产品的 ID
<input style="width:200px; padding:10px; border-radius:4px;"type="text" placeholder="search name" ng-model='productFilter'>
<input type="date" ng-model="to_date">
<input type="date" ng-model="from_date">
<div ng-repeat="product in products | dateRange : from_date : to_date | filter: productFilter track by $index">
<p>Total Inputs: {{product.createdAt}}{{product._id}}</p>
</div>
这是我的 DashboardController
app.controller('dashboardController', ['$scope', '$filter', 'OpFactory', function($scope, $filter, OpFactory){
function getProducts(){
OpFactory.getProducts(function(data){
$scope.products = data;
console.log("data from getProducts function in dashboardcontroller", data);
})
}
getProducts();
$filter('dateRange', function() {
return function( product, fromDate, toDate ) {
var filtered = [];
console.log(fromDate, toDate);
var from_date = Date.parse(fromDate);
var to_date = Date.parse(toDate);
angular.forEach(product, function(item) {
if(item.completed_date > from_date && product.completed_date < to_date) {
filtered.push(item);
}
});
return filtered;
};
});
}]);
有一些问题,但主要问题是您如何创建过滤器。过滤器应该附加到您的模块,例如 angular.module('mymodule', []).filter('dateRange', fn)
.
除此之外,当过滤器尚未完全填充时,您必须处理要呈现的内容,并且过滤器函数中有 product.completed_date
而不是 item.completed
日期。
这里有一个工作示例(只是缺少当输入过滤器尚未完全填充时您想如何处理):
angular.module('webapp', [])
.filter('dateRange', function () {
return function(product, fromDate, toDate) {
var filtered = [];
console.log(fromDate, toDate);
if (!fromDate && !toDate) {
return product;
}
var from_date = Date.parse(fromDate);
var to_date = Date.parse(toDate);
angular.forEach(product, function(item) {
if (item.createdAt > from_date && item.createdAt < to_date) {
filtered.push(item);
}
});
return filtered;
};
})
.controller('dashboardController', ['$scope', '$filter', '$timeout', function($scope, $filter, $timeout) {
$scope.products = [];
function getProducts() {
$timeout(function() {
$scope.products = [{
_id: 1,
createdAt: new Date(2000, 1, 1)
}, {
_id: 2,
createdAt: new Date(2001, 1, 1)
}, {
_id: 3,
createdAt: new Date(2002, 1, 1),
}, {
_id: 4,
createdAt: new Date(2003, 1, 1)
}];
}, 500);
}
getProducts();
}]);
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
</head>
<body ng-app="webapp">
<div ng-controller="dashboardController">
<input style="width:200px; padding:10px; border-radius:4px;"type="text" placeholder="search name" ng-model='productFilter'>
<input type="date" ng-model="from_date">
<input type="date" ng-model="to_date">
<div ng-repeat="product in products | dateRange : from_date : to_date | filter: productFilter track by $index">
<p>Total Inputs: {{product.createdAt}} :: {{product._id}}</p>
</div>
</div>
</body>
</html>
这是我为其他感兴趣的人想出的答案。
app.filter('dateRange', function () {
return function(product, fromDate, toDate) {
var filtered = [];
console.log(fromDate, toDate, filtered);
if (!fromDate && !toDate) {
return product;
}
var from_date = Date.parse(fromDate);
var to_date = Date.parse(toDate);
angular.forEach(product, function(item) {
console.log('in the forEach function')
var createdAt = Date.parse(item.createdAt);
if (from_date && to_date && createdAt > from_date && createdAt < to_date) {
console.log('in the if statement', filtered)
filtered.push(item);
}
})
return filtered;
};
})
我的HTMLTable
<table class="receivingDataTable" datatable='ng' style="width: 1000px;">
<tr>
<th>Date</th>
<th>Container #</th>
<th>Cut #</th>
<th>CTNS #</th>
<th>Pieces</th>
<th>Receiving #</th>
<th>Remarks</th>
</tr>
<tr ng-repeat="product in filtered = (products | dateRange: from_date : to_date)">
<td>{{product.createdAt | date: "MM/dd/yyyy"}}</td>
<td>{{product.container_number}}</td>
<td>{{product.cut_number}}</td>
<td>{{product.ctns_number}}</td>
<td>{{product.pieces}}</td>
<td>{{product._id}}</td>
<td>{{product.remarks}}</td>
</tr>
</table>
我正在尝试弄清楚为什么我的日期范围过滤器不起作用并且我收到错误 - [$injector:unpr] 未知提供程序:dateRangeProvider <- dateRange <- dashboardController。 我尝试将 'dateRange' 放入我的依赖项和 $filter 中,但不确定我所做的是否正确。非常感谢任何帮助!谢谢!
我的 HTML 我试图在两个日期之间进行过滤以获取产品的 ID
<input style="width:200px; padding:10px; border-radius:4px;"type="text" placeholder="search name" ng-model='productFilter'>
<input type="date" ng-model="to_date">
<input type="date" ng-model="from_date">
<div ng-repeat="product in products | dateRange : from_date : to_date | filter: productFilter track by $index">
<p>Total Inputs: {{product.createdAt}}{{product._id}}</p>
</div>
这是我的 DashboardController
app.controller('dashboardController', ['$scope', '$filter', 'OpFactory', function($scope, $filter, OpFactory){
function getProducts(){
OpFactory.getProducts(function(data){
$scope.products = data;
console.log("data from getProducts function in dashboardcontroller", data);
})
}
getProducts();
$filter('dateRange', function() {
return function( product, fromDate, toDate ) {
var filtered = [];
console.log(fromDate, toDate);
var from_date = Date.parse(fromDate);
var to_date = Date.parse(toDate);
angular.forEach(product, function(item) {
if(item.completed_date > from_date && product.completed_date < to_date) {
filtered.push(item);
}
});
return filtered;
};
});
}]);
有一些问题,但主要问题是您如何创建过滤器。过滤器应该附加到您的模块,例如 angular.module('mymodule', []).filter('dateRange', fn)
.
除此之外,当过滤器尚未完全填充时,您必须处理要呈现的内容,并且过滤器函数中有 product.completed_date
而不是 item.completed
日期。
这里有一个工作示例(只是缺少当输入过滤器尚未完全填充时您想如何处理):
angular.module('webapp', [])
.filter('dateRange', function () {
return function(product, fromDate, toDate) {
var filtered = [];
console.log(fromDate, toDate);
if (!fromDate && !toDate) {
return product;
}
var from_date = Date.parse(fromDate);
var to_date = Date.parse(toDate);
angular.forEach(product, function(item) {
if (item.createdAt > from_date && item.createdAt < to_date) {
filtered.push(item);
}
});
return filtered;
};
})
.controller('dashboardController', ['$scope', '$filter', '$timeout', function($scope, $filter, $timeout) {
$scope.products = [];
function getProducts() {
$timeout(function() {
$scope.products = [{
_id: 1,
createdAt: new Date(2000, 1, 1)
}, {
_id: 2,
createdAt: new Date(2001, 1, 1)
}, {
_id: 3,
createdAt: new Date(2002, 1, 1),
}, {
_id: 4,
createdAt: new Date(2003, 1, 1)
}];
}, 500);
}
getProducts();
}]);
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
</head>
<body ng-app="webapp">
<div ng-controller="dashboardController">
<input style="width:200px; padding:10px; border-radius:4px;"type="text" placeholder="search name" ng-model='productFilter'>
<input type="date" ng-model="from_date">
<input type="date" ng-model="to_date">
<div ng-repeat="product in products | dateRange : from_date : to_date | filter: productFilter track by $index">
<p>Total Inputs: {{product.createdAt}} :: {{product._id}}</p>
</div>
</div>
</body>
</html>
这是我为其他感兴趣的人想出的答案。
app.filter('dateRange', function () {
return function(product, fromDate, toDate) {
var filtered = [];
console.log(fromDate, toDate, filtered);
if (!fromDate && !toDate) {
return product;
}
var from_date = Date.parse(fromDate);
var to_date = Date.parse(toDate);
angular.forEach(product, function(item) {
console.log('in the forEach function')
var createdAt = Date.parse(item.createdAt);
if (from_date && to_date && createdAt > from_date && createdAt < to_date) {
console.log('in the if statement', filtered)
filtered.push(item);
}
})
return filtered;
};
})
我的HTMLTable
<table class="receivingDataTable" datatable='ng' style="width: 1000px;">
<tr>
<th>Date</th>
<th>Container #</th>
<th>Cut #</th>
<th>CTNS #</th>
<th>Pieces</th>
<th>Receiving #</th>
<th>Remarks</th>
</tr>
<tr ng-repeat="product in filtered = (products | dateRange: from_date : to_date)">
<td>{{product.createdAt | date: "MM/dd/yyyy"}}</td>
<td>{{product.container_number}}</td>
<td>{{product.cut_number}}</td>
<td>{{product.ctns_number}}</td>
<td>{{product.pieces}}</td>
<td>{{product._id}}</td>
<td>{{product.remarks}}</td>
</tr>
</table>