CODEWITHSUNDEEP
javascriptangularjs
Varis Darasirikul
Varis Darasirikul

Reputation: 3063

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

I use ng-repeat to display each data which i got from the api like this.

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

But i need to filter the data by select options input between the gap by festival_end_date and festival_start_date by this input.

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

So i need to display only data that have different date between 1 - 6 days , 7 - 29 days and everyday depend on the options that user were selected.

How can i do it?

Thanks!

Upvotes: 1

Views: 751

Answers (1)

sheilak
sheilak

Reputation: 5873

You can define your ranges in the controller and use ngOptions to bind it to your select element.

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>

Then your filter function would first calculate the days between the start and end date, and then compare this to the min and max of the selected date range. You can define this as a predicate function in your controller:

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

Upvotes: 1

Related Questions