ng-Repeat Filtern von Daten nach Datumsbereich mit UI Bootstrap-Datum

Question

Ich möchte in der Lage sein, eine Liste zu filtern, die einen Zeitstempel enthält, indem Sie einen Datumsbereich aus dem UI Bootstrap Datepicker auswählen.

Hier ist der Code:

<div class="col-md-10 col-lg-offset-2"> 
       <form class="form-inline"> 
        <div class="form-group"> 
         <div class="input-group"> 
          <div class="input-group-addon"><i class="fa fa-search"></i></div> 
          <input type="text" class="form-control" placeholder="Search for a Loan Application" ng-model="Loansearch"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <select ng-model="Loansearch.mambu_account_state" class="form-control"> 
          <option value="">All Applications</option> 
          <option value="Active">Active</option> 
          <option value="PARTIAL APPLICATION">Partial Application</option> 
          <option value="PENDING APPROVAL">Pending Approval</option> 
          <option value="CLOSE">Close</option> 
         </select> 
        </div> 
        <div class="form-group"> 
         <input type="text" class="form-control" 
           uib-datepicker-popup="dd-mm-yyyy" 

           ng-model="date1" 
           is-open="popup2.opened" 
           datepicker-options="dateOptions" 
           ng-required="true" 
           close-text="Close" 
           alt-input-formats="altInputFormats" 
           placeholder="From: dd-mm-yyyy" 
           ng-click="open2()" 
         /> 
        </div> 
        <div class="form-group"> 
         <input type="text" class="form-control" 
           uib-datepicker-popup="dd-mm-yyyy" 

           ng-model="date2" 
           is-open="popup1.opened" 
           datepicker-options="dateOptions" 
           ng-required="true" 
           close-text="Close" 
           alt-input-formats="altInputFormats" 
           placeholder="To: dd-mm-yyyy" 
           ng-click="open1()" 
         /> 
        </div> 
       </form> 
      </div> 
      <table class="table table-bordered table-striped"> 
       <thead> 
       <tr> 
        <td>First Name</td> 
        <td>Last Name</td> 
        <td>Loan Account ID</td> 
        <td>Loan Amount</td> 
        <td>Created At</td> 
       </tr> 
       </thead> 

       <tbody> 
       <tr ng-repeat="loan in loans|filter:(!!Loansearch || undefined) && Loansearch :true"> 
        <td>@{{ loan.customer.user.first_name }}</td> 
        <td>@{{ loan.customer.user.last_name}}</td> 
        <td>@{{ loan.mambu_loan_account_id }}</td> 
        <td>@{{ loan.mambu_account_state }}</td> 
        <td>@{{ loan.created_at | dateFormat}}</td> 
       </tr> 
       </tbody> 

      </table> 

Zusätzlich möchte ich von der Datepicker mit dem Wert der „Von“ -Feld in der Lage sein zu füllen und auch im Feld „An“ als auch, so zu Erhalte nur die Datensätze, die in diesem Bereich liegen.

Answer 1

Ich weiß nicht, ob ich die Frage richtig verstehe, aber versuchen, diese: inject ui.bootstrap auf Ihre Winkel App und ändern Sie diese Zeile

<input type="date" class="form-control" placeholder="Search for a Loan Application" ng-model="Loansearch">  

mit diesem

<uib-datepicker ng-model="Loansearch" class="well well-sm" ></uib-datepicker> 

und die ng ändern Wiederholen Sie diesen Abschnitt

ng-repeat="loan in loans|dateFilter:Loansearch:'created_at'" 

und ich schrieb einen einfachen Filter, fügen Sie dies hinzu Filter zu Ihrer App

myApp.filter('dateFilter',function(){ 
return function(items,key,field){ 
    return items.filter(function(item){ 
     return key?(item[field].toString().slice(0,10)==key):true; 
    }); 
    }; 
})