如何在 ng-repeat 中按两个日期之间的不同过滤数据？答案

【问题标题】：How can i filter the data by different between two dates in ng-repeat?如何在 ng-repeat 中按两个日期之间的不同过滤数据？
【发布时间】：2015-10-24 16:50:37
【问题描述】：

我使用 ng-repeat 来显示我从 api 获得的每个数据，就像这样。

<div ng-repeat="festival in festivals | filter:searchText:dateSelect"  class="festival-list-box col-xs-12 col-sm-4">
<div class="festival-list">
  <div class="image-gallery-box">
    <img src="{{ festival.festival_pictures| firstImage }}" alt="">
  </div>
  <div class="text-box-contain">
      <h2>{{ festival.festival_name }}</h2>
      <p class="tagline-list">Type &emsp; <span class="tag-word">
      <strong>Dynamic, Relax</strong></span></p>
      <p>Date &emsp;
        <span class="date-list-color" ng-init="oneDay = 24*60*60*1000; dateCompare = 99">
          <strong>
            {{ festival.festival_start_date| cmdate:'MM/dd/yyyy' }} - {{festival.festival_end_date| cmdate:'MM/dd/yyyy' }}
          </strong>
        </span>
      </p>

    <!-- <input type="hidden" value="6" ng-model="diffdateCal"> -->

      <p>Price &emsp; <span class="price-list-color"><strong>20,000&#8361;</strong></span></p>
      <p>Location&emsp;<span class="Location-list-color">
        <strong>
          {{festival.festival_address}}
        </strong></span>
      </p>
      <p><a class="btn btn-info" href="#/festivalDetails/{{festival.id}}" role="button">View details »</a></p>

  </div>
</div>

但我需要通过这个输入的节日结束日期和节日开始日期之间的间隙选择选项输入来过滤数据。

<select class="form-control" ng-model="dateSelect">
        <option value="0">Any Dates</option>
        <option value="6">1 Week</option>
        <option value="29">1 Month</option>

      </select>

所以我只需要显示 1 - 6 天、7 - 29 天和每天之间不同日期的数据，具体取决于用户选择的选项。

我该怎么做？

谢谢！

【问题讨论】：

stackoverflow.com/questions/25515431/…

标签： javascript angularjs

【解决方案1】：

您可以在控制器中定义您的范围并使用ngOptions 将其绑定到您的选择元素。

JS：

$scope.dateRanges = 
[
  { Name:'Any Dates', min: Number.MIN_VALUE, max: Number.MAX_VALUE },
  { Name:'1 week', min: 1, max: 7 },
  { Name:'1 month', min: 7, max: 30 },
];

HTML：

<select
  ng-options="item.Name for item in dateRanges"
  class="form-control"
  ng-model="dateSelect"></select>

然后您的过滤器函数将首先计算开始日期和结束日期之间的天数，然后将其与所选日期范围的最小值和最大值进行比较。您可以将其定义为控制器中的谓词函数：

JS：

$scope.rangeLength = function(item){
  var days = (item.festival_end_date - item.festival_start_date) / (24*60*60*1000);
  return $scope.dateSelect && days >= $scope.dateSelect.min && days < $scope.dateSelect.max;
}

HTML：

<div ng-repeat="festival in festivals | filter:rangeLength">
  ...
</div>

JsFiddle

【讨论】：