Question

我使用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天和每天之间的数据，具体取决于用户选择的选项。

我该怎么做？

谢谢！

Answer 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

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

1 个答案: