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 даты. Моя цель состоит в том, чтобы сделать возможным для пользователя, чтобы выбрать диапазон дат и показывать эти значения, тем не менее, я не могу заставить его работать вместе с моим поискОбъявлением фильтром ... Я использую угловой-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>