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

Question

我经历了很多其他StackOverflow答案，但似乎找不到我的问题的答案。

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

因此，在理想情况下，该代码将使用户能够单击选择下拉菜单，然后单击“接下来的7天”，并且json数组将被过滤以显示接下来7天内具有“ start_date”的所有文章。

我的密码

-选择包装箱代码

<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设置为通过我的自定义过滤器进行过滤，还如下所示将模型与模型之间进行映射：

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