所以我正在使用 ng-repeat 列出有关事件的一些信息，其中之一是日期字段。我想过滤日期，例如，能够显示 future 30 天内的事件。我不确定要采取什么方向来实现这一目标。
<table>
<tr>
<th>Title</th>
<th>Description</th>
<th>Start Time</th>
</tr>
<tr ng-repeat="eventData in eventListData | orderBy:'+StartDateTime'">
<td>{{eventData.Title}}</td>
<td>{{eventData.Description}}</td>
<td>{{eventData.StartDateTime|date:'d MMM yyyy'}}</td>
</tr>
</table>
最佳答案
首先，orderBy 的语法是错误的。它应该是“orderBy:'+StartDateTime'”，其中 +/- 控制升序/降序方向，而“StartDateTime”(注意单引号)是要提取的字段。
为 StartDate 使用时间戳并执行 > 现在 - < 现在 + 30 天，然后你有 2 个选项:
- 在到达您的 View 之前过滤模型数组
- 制作 Angular 过滤器并使用它
我更喜欢第二个选项，我觉得它更符合 Angular 的精神，并且允许更动态地处理数据。我做了一个例子here
var app = angular.module('app', []);
// filter array by @field {String}
// return items from today to @days {Number} from now
// eg: events | upComing:'StartDateTime':30
app.filter('upComing', function(){
return function(items, field, days){
var timeStart = Date.now();
var timeEnd = Date.now() + (days * 86400000); // 1 day in ms
return items.filter(function(item){
return (item[field] > timeStart && item[field] < timeEnd);
});
};
});
app.controller('ctrl', function($scope){
// demo data, StartDateTime should be numbers in your data
$scope.eventListData = [
{
Title:'Event 1 (last in 30 dys)',
Description:'A cool Event',
StartDateTime: Date.now() + (86400000 * 5) // in 5 days
},
{
Title:'Event 2 (next)',
Description:'A cool Event',
StartDateTime: Date.now() + 86400000 // in a day
},
{
Title:'Event 3 (next next)',
Description:'A cool Event',
StartDateTime: Date.now() + (86400000 * 2) // in 2 days
},
{
Title:'Too-far-away Event',
Description:'A cool Event',
StartDateTime: Date.now() + (86400000 * 40) // in 40 days
},
{
Title:'Already-happend Event',
Description:'A cool Event',
StartDateTime: Date.now() - (86400000 * 2) // 2 days ago
}
];
});
这是 HTML:
<html ng-app="app">
<head>
<meta charset=utf-8 />
<title>Angular Date Filter</title>
</head>
<body ng-controller="ctrl">
<table>
<tr>
<th>Title</th>
<th>Description</th>
<th>Start Time</th>
</tr>
<tr ng-repeat="eventData in eventListData | upComing:'StartDateTime':30 | orderBy:'+StartDateTime'">
<td>{{eventData.Title}}</td>
<td>{{eventData.Description}}</td>
<td>{{eventData.StartDateTime|date:'d MMM yyyy'}}</td>
</tr>
</table>
</body>
</html>
关于javascript - 如何过滤 Angular ng-repeat 以使用日期范围？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24642449/