如何在两个日期之间过滤记录?

时间:2016-10-25 15:36:41

标签: angularjs date angular-filters

我在AngularJS工作,我需要根据日历中选定的日期范围添加过滤器。我的日期来自两个领域"来自"和"到"我需要根据json数组中的到期日期显示记录。

当用户选择日期范围并单击搜索时,我需要在两个日期之间获取所选记录。这是我在控制器文件中的js,我以这种格式获得开始和结束日期" yyyy-mm -dd"。请帮助。

 localStorageService.set('usersOpen', users.openUsers);
  localStorageService.bind($scope, 'usersOpen');

users.myUsers = myUsers;
        function myUsers(start_date,end_date){
            DataService.myOpenUsers()
                .then(function successCallback(response) {
                $scope.usersOpen.length = 0;
                $scope.usersOpen.push({'data': response.data.results});
            }, function errorCallback(response) {

            });

从数据服务中我得到了这个json响应。

{
  "results": [{
    "id": "999896",
    "description": "Description Testingggg",
    "picturesUrl": [],
    "assigID": [{
      "userId": "67767776",
      "email": "test@gmail.com",
      "firstName": "test",
      "lastName": "User",
      "pictureUrl": "",
      "notifyStatus": "None",

    }],
    "expiryDate": "2016-10-14T17:48:50.100Z",
    "createdUserId": "8887900",
    "status": "Open",
    "dtModified": "2016-10-14T12:21:27.431Z"
  },{
    "id": "999897",
    "description": "New Tested Description",
    "picturesUrl": [],
    "assignedTo": [{
      "userId": "887997",
      "email": null,
      "firstName": "testing",
      "lastName": "users2",
      "pictureUrl": null,
      "notifyStatus": "None",
      "devices": []
    }, {
      "userId": "887997",
      "email": "testing@hotmail.com",
      "firstName": "Testing",
      "lastName": "User2",
      "pictureUrl": "",
      "notifyStatus": "None",

    }],
    "expiryDate": "2016-10-11T09:46:09.100Z",
    "createdUserId": "887997",
    "status": "Open",
    "location": {
      "lat": 12.1,
      "lon": -3.1
    },
    "dtModified": "2016-10-11T09:36:30.217Z"
  }]
}

这是html,我正在获取记录。

<ul>                        
<li ng-repeat="users in usersOpen[0].data track by $index" class="{{users.status}} {{yit.id}}">                         
<div class="content-box">
<div class="text-box">  
{{users.description}}   
</div>
{{users.expiryDate}}    
</div>
{{users.firstName}} 
 </li>  
</ul> 

2 个答案:

答案 0 :(得分:1)

您可以使用过滤方法定义过滤器:

angular.module('app').filter('dateBetween', function() {
     return function(data, config) {
         if(!angular.isArray(data)) return data;
         var result = [];
         var start = config.start;
         var end = config.end;
         var dateProperty = config.dateProperty;
         data.forEach(function(chunk) {
             if((chunk[dateProperty].getTime() <= end.getTime() && check.getTime() >= start.getTime())
                result.push(chunk);
         });

         return result;
     }
)

假设你在$ scope usersOpen中有一个模型,你可以在你的html代码中应用过滤器,而endDate,startDate也是来自同一个控制器的属性(我不知道你用来检索日期的逻辑) :

<ul>
   <li ng-repeat="user in usersOpen | dateBetween : { start : startDate, end : endDate }"> {{ user.name }} ... </li>
</ul>

usersOpen应该是一个用户数组,因此我链接的过滤器(我认为很清楚)应用过滤。

答案 1 :(得分:0)

&#13;
&#13;
           var product_data = [{
             "id": "999896",
             "description": "Description Testingggg",
             "picturesUrl": [],
             "assigID": [{
               "userId": "67767776",
               "email": "test@gmail.com",
               "firstName": "test",
               "lastName": "User",
               "pictureUrl": "",
               "notifyStatus": "None",

             }],
             "expiryDate": "2016-10-14T17:48:50.100Z",
             "createdUserId": "8887900",
             "status": "Open",
             "dtModified": "2016-10-14T12:21:27.431Z"
           }, {
             "id": "999897",
             "description": "New Tested Description",
             "picturesUrl": [],
             "assignedTo": [{
               "userId": "887997",
               "email": null,
               "firstName": "testing",
               "lastName": "users2",
               "pictureUrl": null,
               "notifyStatus": "None",
               "devices": []
             }, {
               "userId": "887997",
               "email": "testing@hotmail.com",
               "firstName": "Testing",
               "lastName": "User2",
               "pictureUrl": "",
               "notifyStatus": "None",

             }],
             "expiryDate": "2016-10-11T09:46:09.100Z",
             "createdUserId": "887997",
             "status": "Open",
             "location": {
               "lat": 12.1,
               "lon": -3.1
             },
             "dtModified": "2016-10-11T09:36:30.217Z"
           }];

           var startDate = new Date("2016-10-04");
           var endDate = new Date("2016-10-14");

           var resultProductData = product_data.filter(function(a) {
             return new Date(a.expiryDate) >= startDate && new Date(a.expiryDate) <= endDate
           });
           console.log(resultProductData);
&#13;
&#13;
&#13;