Fatal编程技术网
  • angularjs/
  • Angularjs 如何按日期筛选记录？

Angularjs 如何按日期筛选记录？

angularjs

Angularjs 如何按日期筛选记录？,angularjs,Angularjs,我在angular js中工作，数据来自json数组中的api。我需要根据日历中选择的日期范围添加过滤器。我的日期分为两个字段“from”和“to”，也可以是单个日期，我需要根据json中的到期日期显示记录 { "results": [{ "id": "999896", "description": "Description Testingggg", "picturesUrl": [], "assigID": [{ "userId": "67767

我在angular js中工作，数据来自json数组中的api。我需要根据日历中选择的日期范围添加过滤器。我的日期分为两个字段“from”和“to”，也可以是单个日期，我需要根据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"
  }]
}
如果用户选择日期范围并单击搜索，则我需要获取所选记录。这是控制器文件中的我的js

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) {

            });

{
  "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"
  }]
}
这是我需要过滤的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

{
  "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"
  }]
}

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

    

  • 
{{users.description}
{{users.expiryDate}
{{users.firstName}

    •
对于您的问题，您可以使用本机Javascript筛选器：

{
  "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"
  }]
}

response.data.results.filter(function(user){
    return //add your date test here on user.expiryDate 
}
您可以创建一个自定义筛选器来筛选日期范围，如下所示

{
  "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"
  }]
}
过滤器

{
  "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"
  }]
}

 app.filter('dateFilter', function() {
      return function(input, start, end) {
        var inputDate = new Date(input),
          startDate = new Date(start),
          endDate = new Date(end),
          result = [];

        for (var i = 0, len = input.length; i < len; i++) {
          inputDate = new Date(input[i].DepartureDateTime);
          if (startDate < inputDate && inputDate < endDate) {
            result.push(input[i]);
          }
        }
        return result;
      };
    });

app.filter（'dateFilter'，function（）{
返回功能（输入、开始、结束）{
var inputDate=新日期（输入），
开始日期=新日期（开始），
endDate=新日期（结束），
结果=[]；
对于（变量i=0，len=input.length；i
并在HTML中应用

{
  "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"
  }]
}

  <div ng-controller="MyController"> 
        <div ng-repeat="data in Combination | dateFilter:startDate:endDate ">
            <div >{{data.DepartureDateTime}}</div> 
        </div>
 </div>


{{data.DepartureDateTime}

您可以使用angularjs$filter，您需要在控制器中插入$filter，并以您想要的任何格式进行过滤

{
  "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"
  }]
}

$filter('date')(new Date(expiryDate), "M/d/yyyy");
要获取2个日期范围内的用户数据，请使用以下代码

{
  "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"
  }]
}

var fromTime = new Date("2015-04-23").getTime();
var toTime = new Date("2015-04-28").getTime();

var filteredDataByDates = [];
var row, date;

for (i in data) {

  row = data[i];
  date = new Date(row[4]);

  if (date.getTime() >= fromTime && date.getTime() <= toTime) {
    filteredDataByDates.push(row);
  }
}

var fromTime=新日期（“2015-04-23”）.getTime（）；
var toTime=新日期（“2015-04-28”）.getTime（）；
变量filteredDataByDates=[]；
var行，日期；
对于（数据中的i）{
行=数据[i]；
日期=新日期（第[4]行）；

如果（date.getTime（）>=fromTime&&date.getTime（））建议使用moment进行日期解析，因为它在不同浏览器之间更一致。数组也不是输入的吗？为什么它会被转换成日期？除此之外，它与我作为答案编写的内容相匹配。组合变量来自何处..它不在过滤器中。你能告诉我在我的代码中可以在哪里添加它吗？@php\u dev有一个demo Attached此筛选器只会更改日期格式。如何获取用户所选日期范围之间的记录？Di我需要在“filteredDataByDates”中逐个推送所有行数组或它将过滤整个数组。否，执行代码后，您将在filteredDataByDates数组中获得两个给定日期之间的数据，因此您可以将其绑定到UI，您需要保存来自服务的原始数据副本。