如何通过ng-repeat中两个日期之间的差异来过滤数据?

How can i filter the data by different between two dates in ng-repeat?

本文关键字：之间 数据 过滤 日期 两个 ng-repeat 何通过      更新时间：2023-09-26

我使用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>

但是我需要通过选择选项输入在这个输入的festival_end_date和festival_start_date之间的间隙来过滤数据。

<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天和每天取决于用户选择的选项。

我该怎么做呢?

谢谢!

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

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

相关文章：