使用ui引導日期範圍ng-repeat過濾數據引導日期

Question

我希望能夠通過從ui引導日期選擇器中選擇日期範圍來過濾包含時間戳的列表。

下面是代碼：

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

此外，我希望能夠從日期選擇器的值，並在「收件人」欄中填寫了「發件人」字段爲好，所以只獲取這個範圍內的記錄。

Answer 1

我不知道如果我理解這個問題的權利，但試試這個： 注入ui.bootstrap到您的角度應用程序，並改變這一行

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

與此

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

，改變NG - 重複部分到這

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

和我寫了一個簡單的過濾器，添加此過濾到您的應用程序

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