AngularJS Modellfilter mit Datumsbereich Filter

Question

ich in der Ansicht haben:

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

ich auch Filterung haben, die sich auf allen Feldern arbeitet:

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

jedoch das Datum nur gefiltert wird, wenn Ich tippe das Datum im Format: JJJJ-MM-TT in die Textbox ein, also funktioniert es im Grunde nur für ein Datum. Mein Ziel ist es möglich für Benutzer Datumsbereich auswählen und diese Werte zeigen aber, ich kann es nicht zusammen Filter mit meiner Suche funktioniert ... I Winkelpicker bin mit:

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

Datumsauswahl die ich Ich benutze ist: Angular Daterangepicker

Answer 1

Sie müssen einen benutzerdefinierten Filter implementieren, um dies zu tun.

Der benutzerdefinierte Filter überprüft, ob das Post-Erstellungsdatum zwischen dem Startdatum und dem Enddatum des ausgewählten Bereichs liegt.

am Ende ist es wie etwas wie folgt aussehen:

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