ng-按日期范围重复过滤数据
ng-按日期范围重复过滤数据
提问于 2014-08-27 05:28:34
我正在尝试通过键入日期范围来过滤包含时间戳的列表
例如：
html
<div ng-app="tst">
<div ng-controller="MyController">
<table>
<tr>
<td>From:
<input ng-model="query.date1" type="text" placeholder="" />
</td>
<td>To:
<input ng-model="query.date2" type="text" placeholder="" />
</td>
</tr>
<tr ng-repeat="order in orders |filter:query">
<td>{{order.date1 * 1000 | date:'dd-MM-yyyy'}}</td>
<td>{{order.date2 * 1000 | date:'dd-MM-yyyy'}}</td>
</tr>
</table>
</div>
</div>javascript
var nameSpace = angular.module('tst',[]);
nameSpace.controller('MyController', function MyController($scope) {
$scope.orders = [
{
"date1":"1306487800",
"date2":"1406587800"
},
{
"date1":"1196487800",
"date2":"1406597800"
}]
});我希望能够使用值27-05-2010填充"From“字段
"To“字段的值为: 29-07-2015
并仅获取此范围内的记录。
(示例中的第一条记录)。
感谢allot Avi
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-08-27 15:56:11
您可以创建自定义筛选器来实现此目的。
html
<input ng-model="dateFrom" type="text"/>
<input ng-model="dateTo" type="text"/>
<tr ng-repeat="order in orders | myfilter:dateFrom:dateTo">
<td>{{order.date1 * 1000 | date:'dd-MM-yyyy'}}</td>
<td>{{order.date2 * 1000 | date:'dd-MM-yyyy'}}</td>
</tr>javascript
function parseDate(input) {
var parts = input.split('-');
return new Date(parts[2], parts[1]-1, parts[0]);
}
nameSpace.filter("myfilter", function() {
return function(items, from, to) {
var df = parseDate(from);
var dt = parseDate(to);
var result = [];
for (var i=0; i<items.length; i++){
var tf = new Date(items[i].date1 * 1000),
tt = new Date(items[i].date2 * 1000);
if (tf > df && tt < dt) {
result.push(items[i]);
}
}
return result;
};
});另外，我将timestamp数据类型从string更改为numbres。
$scope.orders = [
{
"date1": 1306487800,
"date2": 1406587800
},
{
"date1": 1196487800,
"date2": 1406597800
}]Stack Overflow用户
发布于 2016-08-26 15:43:38
我已经用momentJS创建了一个过滤器，让事情变得更简单：
.filter('dateRange', function() {
return function(items, startDate, endDate) {
var retArray = [];
if (!startDate && !endDate) {
return items;
}
angular.forEach(items, function(obj) {
var receivedDate = obj.date;
if (moment(receivedDate).isAfter(startDate) && moment(receivedDate).isBefore(endDate)) {
retArray.push(obj);
}
});
return retArray;
}
})Stack Overflow用户
发布于 2017-01-20 22:23:01
对于时间操作，我强烈推荐使用momentJS这样的库；对于momentJS和现代浏览器，这可以通过一种非常声明性的方式来实现：
.filter('dateRange', function() {
return function(items, startDate, endDate) {
//an undefined startDate is converted to the beginning of time
startDate = startDate || 0;
const granularity = null // can be 'days', ... see momentJS doc
//you need support for array.prototype.filter and arrow functions; i.e. IE sucks/needs a polyfill
return items.filter(item => moment(item).isBetween(startDate, endDate, granularity, '[]'));
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25515431
复制相关文章
相似问题