javascript - 带有日期范围过滤器的 AngularJS 模型过滤器

Question

我的观点是:

<tr dir-paginate="post in posts |orderBy:propertyName:reverse | filter: searchPost | itemsPerPage: pageSize">
<td>
        {{post.title}}
</td>
<td>
        {{post.content}}
</td>
<td>
        {{post.dateOfCreation | date:"medium"}}
</td>
</tr>

我还有过滤功能，适用于所有字段:

     <div>
        <input type="text" placeholder="Find by title..." ng-model="searchPost.title" />
    <div>
    <div>
        <input type="text" placeholder="Find by content..." ng-model="searchPost.content" />
    </div>

    <div>
        <input type="text" placeholder="Find by date..." ng-model="searchPost.dateOfCreation" />
    </div>

但是，仅当我在文本框中输入格式为 yyyy-mm-dd 的日期时才会过滤日期，因此基本上它仅适用于 1 个日期。我的目标是让用户可以选择日期范围并显示这些值，但是，我无法使其与我的 searchPost 过滤器一起使用... 我正在使用 Angular 日期选择器:

<input date-range-picker class="form-control date-picker" type="text" ng-model="someDate" options = "{locale: {format: 'YYYY-MM-DD'}}"/>

   $scope.someDate = { startDate: null, endDate: null };

我使用的日期选择器是:Angular Daterangepicker

Answer 1

您需要实现一个自定义过滤器才能执行此操作。

自定义过滤器将负责检查帖子创建日期是否在所选范围的开始日期和结束日期之间。

最终它看起来像这样:

// Setup the filter
var app = angular.module('testFilters', []);

app.controller('postsCtrl', ['$scope',function($scope){
  $scope.posts = [
    {title: 'test 2010', dateOfCreation: new Date(2010, 1, 1)},
    {title: 'test 2012', dateOfCreation: new Date(2012, 1, 1)},
    {title: 'test 2014', dateOfCreation: new Date(2014, 1, 1)},
    {title: 'test 2016', dateOfCreation: new Date(2016, 1, 1)}
  ];
  
  $scope.searchPost = {title: 'test', date: {startDate: new Date(2011, 1, 1), endDate: new Date(2015, 1, 1) } };
}]);

app.filter('postFilter', function() {

  // Create the return function and set the required parameter name to **input**
  return function(input, post) {

    var out = [];

    angular.forEach(input, function(p) {
      var filtered = true;
      
      // checking if we should check the title and cehcking
      // you may want to pass everything to lowercase for best search results
      if(post.title && p.title.indexOf(post.title) < 0){
        filtered = false;
      }
      
      // same for the content
      if(post.content && p.content.indexOf(post.content) < 0){
        filtered = false;
      }
      
      // checking the date of creation against the date range
      if(post.date && post.date.startDate && post.date.endDate){
        if(p.dateOfCreation < post.date.startDate || p.dateOfCreation > post.date.endDate){
          filtered = false
        }
      }
      
      // adding the post to the resulting array
      if(filtered){
        out.push(p);
      }
    });

    return out;
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="testFilters" ng-controller="postsCtrl">
  <h3>unfiltered posts:</h3>
  <div ng-repeat="post in posts">
    ----------------------------------------------------<br>
    Title: {{post.title}}<br>
    Content: {{post.content}}<br>
    Created: {{post.dateOfCreation | date:'MM/dd/yyyy'}}<br>
  </div>
  <hr>
  <br>
  <h3>filtering post:</h3>
  <div>
    Title: {{searchPost.title}}<br>
    Content: {{searchPost.content}}<br>
    Range: {{searchPost.date.startDate | date:'MM/dd/yyyy'}} - {{searchPost.date.endDate| date:'MM/dd/yyyy'}}<br>
  </div>
  <hr>
  <br>
  <h3>filtered posts:</h3>
  <div ng-repeat="post in posts | postFilter:searchPost">
    ----------------------------------------------------<br>
    Title: {{post.title}}<br>
    Content: {{post.content}}<br>
    Created: {{post.dateOfCreation | date:'MM/dd/yyyy'}}<br>
  </div>
</div>