I want to filter data by event date. I have the following options to filter: current day, current month and current year. Below you can see what I have so far:
我想按事件日期过滤数据。我有以下选项可以过滤:当前日期、当前月份和当前年度。下面你可以看到我目前所拥有的:
function dateCtrl($scope) {
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
$scope.dateToday = Date.parse(curr_month + "/" + curr_date + "/" + curr_year);
$scope.dateRange = "";
$scope.dataModels = [
{age:5,name:'John Lennon',eventDate:"1390524400000"},
{age:12,name:'Nick Young',eventDate:"1377500400000"},
{age:10,name:'Mike Johnson',eventDate:"1374044400000"},
{age:15,name:'Lisa Leslie',eventDate:"1335942000000"}
];
$scope.eventDateFilter = function(column) {
if(column === 'today') {
$scope.dateRange = $scope.dateToday;
} else if (column === 'currentWeek') {
//need logic
} else if (column === 'currnetMonth') {
//need logic
} else if (column === 'currnetYear') {
//need logic
}else {
$scope.dateRange = "";
}
}
}
and here I have the controller:
这里我有控制器:
<div ng:controller="dateCtrl">
Date Filter
<ul class="inline">
<li><a href ng-click="eventDateFilter('all')">All</a></li>
<li><a href ng-click="eventDateFilter('today')">Today</a></li>
<li><a href ng-click="eventDateFilter('pastWeek')">Past Week</a></li>
<li><a href ng-click="eventDateFilter('pastMonth')">Past Month</a></li>
</ul>
<table class="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Event Date</th>
</tr>
<tr ng:repeat="data in dataModels | filter:dateRange">
<td>{{data.name}}</td>
<td>{{data.age}}</td>
<td>{{data.eventDate | date:medium}}</td>
</tr>
</table>
</div>
I have the entire code here : The code
我这里有完整的代码:代码
2 个解决方案
#1
2
Original Answer
First, let me paraphrase your question (to make sure I answer to what you asked), as I'm not 100% sure about it:
首先,让我来解释一下你的问题(确保我回答你的问题),因为我不是百分之百确定的:
I have a list of
{age: <Number>, name: <String>, eventDate: <Timestamp>}
objects and I want to filter them by theireventDate
property. E.g. I want only objects with aeventDate
in the current week.我有一个{age:
, name: , eventDate: }对象的列表,我想通过它们的eventDate属性对它们进行过滤。我只需要本周内有活动日期的物品。
To achieve this you have to minimally reorder your Controller:
要做到这一点,你必须最低限度地重新排序你的控制器:
$scope.dateRanges = {
all: {from: 0, to: Number.MAX_VALUE},
// defining getCurrent[Week,Month,Year]Range() left open for you,
// https://*.com/questions/8381427/ is a good start
week: getCurrentWeekRange(),
month: getCurrentMonthRange(),
year: getCurrentYearRange(),
};
$scope.currentDateRange = $scope.dateRanges.all; // as initial value
$scope.eventDateFilter = function(event) {
return $scope.currentDateRange.from <= event.eventDate
&& event.eventDate <= $scope.currentDateRange.to;
});
Then you can use it in the template as
然后您可以在模板as中使用它
<ul>
<li ng-click="currentDateRange = dateRanges.all">show all</li>
<li ng-click="currentDateRange = dateRanges.week">show week</li>
<li ng-click="currentDateRange = dateRanges.month">show month</li>
<li ng-click="currentDateRange = dateRanges.year">show year</li>
</ul>
<table>
<tr ng-repeat="data in dataModels | filter:eventDateFilter">
<td>{{data.name}}</td>
<td>{{data.age}}</td>
<td>{{data.eventDate | date:medium}}</td>
</tr>
</table>
The important difference is that you don't call functions on ng-click
ing your navigation, but just change the model (and let angular update the view).
重要的区别在于,您不调用在ng-click导航上的函数,而只需更改模型(并让角度更新视图)。
This is what we were used to do (from jQuery & the likes) for years. But with angular you need a mind shift. The template views the model and updates automatically once the model changes. You don't have to initiate those updates yourself.
这是我们多年来一直在做的事情(来自jQuery和类似工具)。但是有棱角,你需要改变思想。模板查看模型并在模型更改后自动更新。你不必自己发起这些更新。
Edit: getCurrentDayRange()
As the question arose in the comments, here's how you create a range (e.g. for the current day). It is heavily inspired by this answer to the question I cited above.
随着问题出现在评论中,以下是你如何创建一个范围(例如今天)。我在上面提到的这个问题的答案给了我很大的启发。
function getCurrentDayRange() {
// new Date() returns the moment it is called by default
return {
// the day starts at 00:00:00.000
from: new Date().setHours(0, 0, 0, 0),
// it ends at 23:59:59.999
to: new Date().setHours(23, 59, 59, 999)
};
}
On the question when to call eventDateFilter
: it gets called by the AngularJS digest loop, you never call it yourself. See the Scope documentation for a deep-dive.
关于何时调用eventDateFilter的问题:它由AngularJS摘要循环调用,您永远不会自己调用它。请参阅范围文档以了解更深入的内容。
#2
0
To simplify the calculation you could use moment.js
为了简化计算,可以使用moment.js
function getCurrentDayRange() {
return {
from: moment().startOf('day'),
to: moment().endOf('day')
};
}
function getCurrentWeekRange() {
return {
from: moment().startOf('week'),
to: moment().endOf('week')
};
};
function getCurrentMonthRange() {
return {
from: moment().startOf('month'),
to: moment().endOf('month')
};
}
function getCurrentYearRange() {
return {
from: moment().startOf('year'),
to: moment().endOf('year')
};
}
#1
2
Original Answer
First, let me paraphrase your question (to make sure I answer to what you asked), as I'm not 100% sure about it:
首先,让我来解释一下你的问题(确保我回答你的问题),因为我不是百分之百确定的:
I have a list of
{age: <Number>, name: <String>, eventDate: <Timestamp>}
objects and I want to filter them by theireventDate
property. E.g. I want only objects with aeventDate
in the current week.我有一个{age:
, name: , eventDate: }对象的列表,我想通过它们的eventDate属性对它们进行过滤。我只需要本周内有活动日期的物品。
To achieve this you have to minimally reorder your Controller:
要做到这一点,你必须最低限度地重新排序你的控制器:
$scope.dateRanges = {
all: {from: 0, to: Number.MAX_VALUE},
// defining getCurrent[Week,Month,Year]Range() left open for you,
// https://*.com/questions/8381427/ is a good start
week: getCurrentWeekRange(),
month: getCurrentMonthRange(),
year: getCurrentYearRange(),
};
$scope.currentDateRange = $scope.dateRanges.all; // as initial value
$scope.eventDateFilter = function(event) {
return $scope.currentDateRange.from <= event.eventDate
&& event.eventDate <= $scope.currentDateRange.to;
});
Then you can use it in the template as
然后您可以在模板as中使用它
<ul>
<li ng-click="currentDateRange = dateRanges.all">show all</li>
<li ng-click="currentDateRange = dateRanges.week">show week</li>
<li ng-click="currentDateRange = dateRanges.month">show month</li>
<li ng-click="currentDateRange = dateRanges.year">show year</li>
</ul>
<table>
<tr ng-repeat="data in dataModels | filter:eventDateFilter">
<td>{{data.name}}</td>
<td>{{data.age}}</td>
<td>{{data.eventDate | date:medium}}</td>
</tr>
</table>
The important difference is that you don't call functions on ng-click
ing your navigation, but just change the model (and let angular update the view).
重要的区别在于,您不调用在ng-click导航上的函数,而只需更改模型(并让角度更新视图)。
This is what we were used to do (from jQuery & the likes) for years. But with angular you need a mind shift. The template views the model and updates automatically once the model changes. You don't have to initiate those updates yourself.
这是我们多年来一直在做的事情(来自jQuery和类似工具)。但是有棱角,你需要改变思想。模板查看模型并在模型更改后自动更新。你不必自己发起这些更新。
Edit: getCurrentDayRange()
As the question arose in the comments, here's how you create a range (e.g. for the current day). It is heavily inspired by this answer to the question I cited above.
随着问题出现在评论中,以下是你如何创建一个范围(例如今天)。我在上面提到的这个问题的答案给了我很大的启发。
function getCurrentDayRange() {
// new Date() returns the moment it is called by default
return {
// the day starts at 00:00:00.000
from: new Date().setHours(0, 0, 0, 0),
// it ends at 23:59:59.999
to: new Date().setHours(23, 59, 59, 999)
};
}
On the question when to call eventDateFilter
: it gets called by the AngularJS digest loop, you never call it yourself. See the Scope documentation for a deep-dive.
关于何时调用eventDateFilter的问题:它由AngularJS摘要循环调用,您永远不会自己调用它。请参阅范围文档以了解更深入的内容。
#2
0
To simplify the calculation you could use moment.js
为了简化计算,可以使用moment.js
function getCurrentDayRange() {
return {
from: moment().startOf('day'),
to: moment().endOf('day')
};
}
function getCurrentWeekRange() {
return {
from: moment().startOf('week'),
to: moment().endOf('week')
};
};
function getCurrentMonthRange() {
return {
from: moment().startOf('month'),
to: moment().endOf('month')
};
}
function getCurrentYearRange() {
return {
from: moment().startOf('year'),
to: moment().endOf('year')
};
}