使用angularjs在两个选定日期之间过滤表数据时出现问题

时间：2017-04-26 06:46:59

标签： html angularjs angularjs-ng-repeat custom-directive

我正在根据两个选定的日期过滤表格内容。 它会过滤日期，但结果不正确。 dateRange Filter写在控制器中。

ProductionController 

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

请在转换为数字格式时检查转换后的日期value.produceDate，它不会介于from和date之间。因此，此处不会进行过滤。

＆＃13;
＆＃13; 
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;
}})
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

我在你的.filter做了一些修改并使用了这个GithubLink指令：

＆＃13;
＆＃13; 
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 = function(date){
      var days = +date.substr(0, 2);
      var month = +date.substr(3, 2);
      var year = +date.substr(6, 4);
      return new Date(year, month, days);
    }
    
    return function(produceList, fromDate, toDate) {    
      if(fromDate && toDate){
        var filtered = [];
        angular.forEach(produceList, function(items) {        
            if (items.produceDate > Date.parse(fromStr2Date(fromDate)) && items.produceDate < Date.parse(fromStr2Date(toDate)))
                filtered.push(items);
        });
        return filtered;
      }
      else
        return produceList;
}})
＆＃13; 
<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>
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

这是您需要的解决方案。我也使用了时刻js，但是根据你给出的数据比较epoch次，采取了一种简单的方法。

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<body>

<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>
<script>
angular.module('app', ['720kb.datepicker']).controller('MyController', function ($scope) {  
  var formatStr = 'DD/MM/YYYY';
    $scope.from_date = moment("2017-04-05").format(formatStr);
  $scope.to_date = moment("2017-04-29").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": 1491808021000,
 	"produceId": 66
 },
 {
 	"itemName": "test1",
 	"produceDate": 1491805456000,
 	"produceId": 65
 },
 {
 	"itemName": "test2",
 	"produceDate": 1490615680000,
 	"produceId": 65
 },
 {
 	"itemName": "test3",
 	"produceDate": 1490615515000,
 	"produceId": 65
 },
 {
 	"itemName": "test4",
 	"produceDate": 1490611140000,
 	"produceId": 65
 },
 {
 	"itemName": "test5",
 	"produceDate": 1490352067000,
 	"produceId": 65
 },
  {
 	"itemName": "test6",
 	"produceDate": 1490271418000,
 	"produceId": 65
 },
  {
 	"itemName": "test7",
 	"produceDate": 1489828994000,
 	"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) {
          console.log('a',items.produceDate)
                              console.log(Date.parse(moment(fromDate, formatStr)))
            if (items.produceDate > Date.parse(moment(fromDate, formatStr)) && items.produceDate < Date.parse(moment(toDate, formatStr)))
                filtered.push(items);
        });
        return filtered;
      }
      else
        return produceList;
}})
</script>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

Here is a Working DEMO

相关问题
最新问题