【发布时间】：2017-09-23 10:11:56
【问题描述】：
我正在根据两个选定的日期过滤表格内容。 它确实过滤了日期，但结果不正确。 dateRange 过滤器写在控制器中。
生产控制器
angular.module('app').controller('ProductionController',
['$scope','$state','ProductionService','FarmerRepository',
function(scope,state,ProductionService,FarmerRepository) {
fetchAllUsers();
function fetchAllUsers() {
ProductionService.fetchAllUsers().then(function(d) {
produceList = d;
scope.produceList = produceList;
}, function(errResponse) {
console.error('Error while fetching produceList');
});
};
//this is custom filter
.filter('dateRange', function() {
return function(produceList, fromDate, toDate) {
if(fromDate && toDate){
var filtered = [];
angular.forEach(produceList, function(items) {
if (items.produceDate > Date.parse(fromDate) && items.produceDate < Date.parse(toDate))
filtered.push(items);
});
return filtered;
}
else
return produceList;
}})
view.html
<datepicker date-format="dd/MM/yyyy" >
<input class="form-control" name="from_date"
type="text" ng-model="from_date" required />
</datepicker>
<datepicker date-format="dd/MM/yyyy" selector="form-control">
<input class="form-control" name="to_date"
type="text" ng-model="to_date" required />
</datepicker>
<tr ng-repeat="item in produceList |dateRange:from_date:to_date|filter:search">
编辑： 脚本顺序
<script ng-src=".js/moment.js"></script>
<script ng-src="./js/alasql.min.js"></script>
<script ng-src="./js/xlsx.core.min.js"></script>
<link ng-href="./css/page.css" rel="stylesheet" />
<link ng-href="./css/angular-datepicker.css" rel="stylesheet"
type="text/css" />
<link ng-href="./css/page.css" rel="stylesheet" />
请检查转换后的日期值。produceDate 转换为数字格式时它不在从日期和到日期之间。因此这里没有发生过滤。
angular.module('app', ['720kb.datepicker']).controller('MyController', function ($scope) {
var formatStr = 'DD/MM/YYYY';
$scope.from_date = moment("2017-05-02").format(formatStr);
$scope.to_date = moment("2017-05-10").format(formatStr);
$scope.produceList = [{
"itemName": "Mango",
"produceDate": 1493360722000,
"produceId": 90
},
{
"itemName": "Banana",
"produceDate": 1493290754000,
"produceId": 89
},
{
"itemName": "Grapes",
"lastDateForBid": 1493510400000,
"produceDate": 1493099760000,
"produceId": 83
},
{
"itemName": "Apple",
"produceDate": 1490615680000,
"produceId": 66
},
{
"itemName": "Grapes",
"produceDate": 1490615515000,
"produceId": 65
}]
})
.filter('dateRange', function() {
var formatStr = 'DD/MM/YYYY';
return function(produceList, fromDate, toDate) {
if(fromDate && toDate){
var filtered = [];
angular.forEach(produceList, function(items) {
if (items.produceDate > Date.parse(moment(fromDate, formatStr)) && items.produceDate < Date.parse(moment(toDate, formatStr)))
filtered.push(items);
});
return filtered;
}
else
return produceList;
}})<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.min.css" rel="stylesheet" type="text/css" />
<div ng-app='app' ng-controller="MyController">
<div>
fromDate: <datepicker date-format="dd/MM/yyyy"><input ng-model="from_date" type="text"/></datepicker>
</div>
<div>
toDate: <datepicker date-format="dd/MM/yyyy"><input ng-model="to_date" type="text"/></datepicker>
</div>
search:
<br/>
<input type='text' ng-model='search'/>
<ul>
<li ng-repeat="item in produceList | dateRange:from_date:to_date |filter:search">
{{item | json}}
</li>
</ul>
</div>【问题讨论】：
-
你是什么意思：'dateRange 过滤器是写在控制器中的'？你必须做 angular.module('farmer').filter('dateRange', function(){...}
-
您确定 items.produceDate 的格式正确吗？也许你只需要做 Date.parse(items.produceDate) 来比较。
-
@PedroPerez y 解析它（items.produceDate）
-
@PedroPerez 实际上它的比较但最终显示整个表格或者它不只显示
标签： html angularjs angularjs-ng-repeat custom-directive