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

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

我使用的Datepicker是：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>

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

1 个答案: