Question

我已经完成了很多其他StackOverflow的答案，我似乎无法找到问题的答案。

我的页面顶部有一个选择框，允许您通过“start_date”过滤json数组中的内容。我可以使用下面提到的代码在一个日期执行此操作，但我似乎无法在多个日期或从日期开始执行此操作。

因此，在理想的世界中，代码将使用户能够单击选择下拉列表并单击“接下来的7天”，并且将过滤json数组以显示在接下来的7天内具有“start_date”的所有文章。 / p>

我的代码

- 选择框代码

<select class="js-date-trigger" ng-model="query.start_time">
      <option value=""> All dates</option>
      <option value="{{ Events.date(0) }}"> Today</option>
      <option value="{{ Events.date(1) }}"> Tomorrow</option>
      <option value="This weekend"> This weekend</option>
      <option value="{{Events.date(1) || Events.date(2)}}"> Next 7 days</option>
      <option class="trigger" value=" Specific date:"> Specific date:</option>
</select>

-Ng-重复代码

<div class="event block block--fullwidth" ng-repeat="event in filtered = (Events.events | filter:query:strict | orderBy:Events.orderEvent)">
...content repeated...
</div>

- 我的控制器中的功能

var vm = this;

        vm.date = function(daysFromNow){
            days=daysFromNow;
            myDate = new Date();
            myDate.setTime(myDate.getTime()+(days*24*60*60*1000));
            var dd = myDate.getDate();
            var mm = myDate.getMonth()+1; //January is 0!
            var yyyy = myDate.getFullYear();

            if(dd<10){
                dd='0'+dd
            }
            if(mm<10){
                mm='0'+mm
            }
            return yyyy+'-'+mm+'-'+dd;
        }

感谢您的帮助，如果您需要更多信息，请告诉我，因为这是我的第一篇StackOverflow帖子。

对于其他寻求此答案解决方案的人，以下是我使用的代码。

我基本上创建了一个名为myDateRange的自定义过滤器，其中包含按日期范围过滤结果的所有逻辑。

.filter('myDateRange',['$filter',dateRange])
// depend on $filter to set the date
    function dateRange($filter){
        // Pass in the array, and custom from/to fields to my filter
        return function(events, from, to){
            var result = [];
            // if the events are loaded, iterate through each event in the JSON
            if (events && events.length > 0){
                $.each(events, function (index, event){
                    //Format event date to my format
                    var eventDate = new Date(event.start_time.replace(/-/g,"/"));
                    eventDate = $filter('date')(eventDate, "yyyy-MM-dd");

                    // Get tomorrows date and set to my format
                    var tomorrow = new Date();
                    tomorrow.setDate(tomorrow.getDate() + 1);
                    tomorrow = $filter('date')(tomorrow, "yyyy-MM-dd");

                    // If the to date is the same as tomorrows date then set from to the same date(this ensures from:tomorrow-to:tomorrow is set so only tomorrow events show)
                    if(to == tomorrow){
                        from = tomorrow;
                    }
                    // If events are within the date range set then push it to the array
                    if (eventDate >= from && eventDate <= to){
                        result.push(event);
                    }
                });
                // return the array back to the scope
                return result;
            }
        };
    }

然后我将ng-repeat设置为按我的自定义过滤器进行过滤，同时将to和from映射到我的模型，如下所示：

 <div class="event block block--fullwidth" ng-repeat="event in filtered = (Events.events | myDateRange:Events.dateFrom:Events.dateTo | orderBy:Events.orderEvent)">

在我的控制器中，我将默认模型/范围设置如下：

vm.dateFrom = vm.date(0);
vm.dateTo = vm.date(9999);

vm.date是一个自定义函数，它从现在起返回x天的日期，因此vm.date（1）将在明天返回，而vm.date（365）将从现在开始返回日期。如果您对此功能感兴趣，请了解它的工作原理。

vm.date = function(daysFromNow){
            days=daysFromNow;
            myDate = new Date();
            myDate.setTime(myDate.getTime()+(days*24*60*60*1000));
            var dd = myDate.getDate();
            var mm = myDate.getMonth()+1; //January is 0!
            var yyyy = myDate.getFullYear();

            if(dd<10){
                dd='0'+dd
            }
            if(mm<10){
                mm='0'+mm
            }
            return yyyy+'-'+mm+'-'+dd;
        }

最后，我将dateTo映射到我的选择框：

<select class="js-date-trigger" ng-model="Events.dateTo">
      <option value="{{ Events.date(9999) }}"> All dates</option>
      <option value="{{ Events.date(0) }}"> Today</option>
      <option value="{{ Events.date(1) }}"> Tomorrow</option>              
      <option value="{{Events.date(7)}}"> Next 7 days</option>
</select>

而且几乎可以通过我的选择框获取日期范围。如果有人试图做类似的事情，请随意使用我的代码。如果您遇到困难，请随时发布回复，我会尽力提出建议。

谢谢大家。

Answer 1

您可以使用其他参数编写自定义dateRange过滤器，然后将其称为 ng-repeat="event in filtered = (Events.events | dateRange:startDate:endDate)"

Answer 2

使用过滤器

<div class="event block block--fullwidth" ng-repeat="event in Events.events | filter: myFilter ">

控制器中的

vm.myFilter = function(event) {
   return Math.round((event.start_date-Date.now())/(1000*60*60*24)) <  DAYS_OPTION;
}

Angular JS - 通过select选项过滤多个值

对于其他寻求此答案解决方案的人，以下是我使用的代码。

2 个答案: