uiブートストラップ日付を使用して日付範囲でデータをフィルタリングするng-repeat

Question

uiブートストラップのdatepickerから日付範囲を選択してタイムスタンプを含むリストをフィルタできます。ここで

コードです：さらに

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

、私がするので、同様に日付ピッカーからの値とし、また、「へ」のフィールドに「From」フィールドを埋めることができるようにしたいですこの範囲にあるレコードのみを取得します。あなたの角度アプリに ジェクトui.bootstrapおよび変更するには、このラインこの

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

と

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

をし、NGを変更：私は質問を理解している場合、右が、これを試してみてください知らない

Answer 1

- このセクションを繰り返して

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