使用angularjs在两个选定日期之间过滤表数据时遇到问题 [英] Trouble in filter table data between two selected dates using angularjs
本文介绍了使用angularjs在两个选定日期之间过滤表数据时遇到问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在根据两个选定的日期过滤表格内容.它确实过滤了日期，但结果不正确.dateRange 过滤器写在控制器中.
生产控制器
angular.module('app').controller('ProductionController',['$scope','$state','ProductionService','FarmerRepository',功能(范围，状态，生产服务，FarmerRepository){fetchAllUsers();函数 fetchAllUsers() {ProductionService.fetchAllUsers().then(function(d) {生产列表 = d;scope.produceList = 生产列表；}，函数(错误响应){console.error('获取产品列表时出错');});};//这是自定义过滤器.filter('dateRange', function() {返回函数(生产列表，从日期，到日期){if(fromDate && toDate){var 过滤 = [];angular.forEach(produceList, function(items) {if (items.produceDate > Date.parse(fromDate) && items.produceDate < Date.parse(toDate))过滤.推(项目)；});返回过滤；}别的返回产品列表；}})view.html
脚本顺序
<script ng-src="./js/alasql.min.js"></script><script ng-src="./js/xlsx.core.min.js"></script><link ng-href="./css/page.css" rel="样式表"/><link ng-href="./css/angular-datepicker.css" rel="样式表"type="text/css"/><link ng-href="./css/page.css" rel="样式表"/>请检查转换后的日期值.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": "芒果",生产日期":1493360722000，生产 ID":90},{"itemName": "香蕉",生产日期":1493290754000，生产ID":89},{"itemName": "葡萄","lastDateForBid": 1493510400000,生产日期":1493099760000，生产ID":83},{"itemName": "苹果",生产日期":1490615680000，生产 ID":66},{"itemName": "葡萄",生产日期":1490615515000，生产ID":65}]}).filter('dateRange', function() {var formatStr = 'DD/MM/YYYY';返回函数(生产列表，从日期，到日期){if(fromDate && toDate){var 过滤 = [];angular.forEach(produceList, function(items) {if (items.produceDate > Date.parse(moment(fromDate, formatStr)) && items.produceDate < Date.parse(moment(toDate, formatStr)))过滤.推(项目)；});返回过滤；}别的返回产品列表；}})<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></脚本><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>toDate:<datepicker date-format="dd/MM/yyyy"><input ng-model="to_date" type="text"/></datepicker>
搜索:<br/><input type='text' ng-model='search'/><ul><li ng-repeat="生产列表中的项目 | dateRange:from_date:to_date |filter:search">{{项目 |json}}
解决方案
我对你的 .filter 做了一些修改并使用了这个 datepicker 指令:
angular.module('app', ['720kb.datepicker']).controller('MyController', function ($scope) {$scope.from_date = '02/05/2017';$scope.to_date = '10/05/2017';$scope.produceList = [{itemName:'Tom',produceDate: Date.parse(new Date(2017, 5, 9))},{itemName:'Sam',produceDate: Date.parse(new Date(2017, 5, 10))},{itemName:'Paul',produceDate: Date.parse(new Date(2017, 5, 11))},{itemName:'Henry',produceDate: Date.parse(new Date(2017, 5, 12))},]}).filter('dateRange', function() {var fromStr2Date = 函数(日期){var 天 = +date.substr(0, 2);var 月 = +date.substr(3, 2);var year = +date.substr(6, 4);返回新日期(年、月、日)；}返回函数(生产列表，从日期，到日期){if(fromDate && toDate){var 过滤 = [];angular.forEach(produceList, function(items) {if (items.produceDate > Date.parse(fromStr2Date(fromDate)) && items.produceDate < Date.parse(fromStr2Date(toDate)))过滤.推(项目)；});返回过滤；}别的返回产品列表；}})<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.19/angular-datepicker.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>toDate:<datepicker date-format="dd/MM/yyyy"><input ng-model="to_date" type="text"/></datepicker>
搜索:<br/><input type='text' ng-model='search'/><ul><li ng-repeat="生产列表中的项目 | dateRange:from_date:to_date |filter:search">{{项目 |json}}
