javascript - 如何在 Angular js 中按日期过滤数据

Question

我想按事件日期过滤数据。我有以下选项可以过滤:当天、月份和年份。下面你可以看到我到目前为止所拥有的:

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 = "";
        }
    }
}

这里我有 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>

我这里有完整的代码:The code

Answer 1

原始答案

首先，让我解释一下您的问题(以确保我回答您的问题)，因为我对此不是 100% 确定:

I have a list of {age: <Number>, name: <String>, eventDate: <Timestamp>} objects and I want to filter them by their eventDate property. E.g. I want only objects with a eventDate in the current week.

要实现这一点，您必须最少地重新排序您的 Controller :

$scope.dateRanges = {
    all: {from: 0, to: Number.MAX_VALUE},
    // defining getCurrent[Week,Month,Year]Range() left open for you,
    // https://stackoverflow.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;
});

然后您可以在模板中使用它

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

重要的区别是您不调用 ng-click 上的函数导航，但只需更改模型(并让 Angular 更新 View )。

这就是我们多年来(来自 jQuery 等)所做的事情。但对于 Angular，你需要转变思维。模板查看模型并在模型更改后自动更新。您不必自己启动这些更新。

---

编辑:getCurrentDayRange()

由于评论中出现了问题，以下是创建范围的方法(例如当天)。它深受 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)
    };
}

关于何时调用eventDateFilter的问题:它被AngularJS摘要循环调用，你永远不会自己调用它。请参阅Scope documentation进行深入研究。