按日期、月份和年份过滤ng-repeat

I have the following variable:

我有以下变量:

scope.availabilities = [
    {
        date : "2014-10-01 07:00:00",
        intervals : [...]
    },
    {
        date : "2014-10-02 07:00:00",
        intervals : [...]
    },
    ...
]

I have a date picker, and you can select to see each month. Let's call this scope.month. Currently, I save this as an array of scope.month = [year, month], for instance scope.month = [2014, 10] because I want to be able to display each month's availabilities.

我有一个日期选择器，你可以选择每月查看。让我们称之为scope.month。目前，我将它保存为一个范围数组。月=[年，月]，例如范围。月=[2014,10]因为我想展示每个月的可用性。

Now, I want use ng-repeat, but filter these availabilities based on their date and only show the selected month.

现在，我想使用ng-repeat，但是根据它们的日期过滤这些可用性，只显示选定的月份。

The only way I can think of doing this is to have my own custom filter, i.e.

我能想到的唯一方法是拥有我自己的自定义过滤器，即。

<div ng-repeat="availability in availabilities | filterByDate:month">

And then have my filter defined as:

然后定义过滤器为:

app.filter('filterByDate', function()
{
    return function(availabilities, month)
    {
        // Here do the filtering, for instance, using underscore _.filter
    }
});

But is there a way I could do this natively using AnuglarJS built in filters?

但是，有没有一种方法可以让我用内置在过滤器中的AnuglarJS来做这件事呢?

1 个解决方案

#1

Like this:

是这样的:

app.filter('filterByDate', function()
{
    return function(availabilities, month)
    {
        // Here do the filtering, for instance, using underscore _.filter
        return availabilities.filter(function(item){ 
             var parts = item.date.match(/^(\d{4})\-(\d{2})\-(\d{2})\s(\d{2})\:(\d{2})\:(\d{2})$/);
             return month[1]===parseInt(parts[2]) && month[0]===parseInt(parts[1]);
        });

    }
});

If the month that you are saving in $scope.moth is base 0 (0-11) and the month of the dates in "availabilities" are not in base 0, then you should change this line:

如果你在美元范围内存钱的月份。蛾子的基数为0(0-11)，“可用性”中的月份不在基数为0，那么你应该改变这条线:

             return month[1]+1===parseInt(parts[2]) && month[0]===parseInt(parts[1]);

Update

You could actually accomplish the same thing using the $filterfilter combined with a custom function, like this:

你可以使用$filterfilter和一个自定义函数来完成同样的事情，比如:

In your controller define a function like this:

在控制器中定义如下函数:

$scope.filterByMonth = function(month){
   return function(item){ 
      var parts = item.date.match(/^(\d{4})\-(\d{2})\-(\d{2})\s(\d{2})\:(\d{2})\:(\d{2})$/);
      return month[1]===parseInt(parts[2]) && month[0]===parseInt(parts[1]);
   };
}

And then in your view you can do this:

在你看来，你可以这样做:

<div ng-repeat="availability in availabilities|filter:filterByMonth(month)">