如何用角js数据来过滤数据?

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

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 their eventDate property. E.g. I want only objects with a eventDate 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-clicking 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

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') 
    };
}