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

在这里我有控制器：

<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

原始答案

首先，让我解释你的问题（以确保我回答你的问题），因为我不是百分之百确定它：

  

我有一个{age: <Number>, name: <String>, eventDate: <Timestamp>}个对象列表，我希望按eventDate属性过滤它们。例如。我只想在当前周中使用eventDate的对象。

要实现这一目标，您必须对控制器进行最低限度的重新排序：

$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导航上调用函数，而只需更改模型（并让角度更新视图）。

这是我们多年来常常做的事情（来自jQuery和他们的喜欢）。但有角度你需要一个心灵转变。模板会查看模型，并在模型更改后自动更新。您不必自己发起这些更新。

---

编辑：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进行深入研究。

Answer 2

为简化计算，您可以使用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') 
    };
}