ng-repeat 使用 ui bootstrap date 按日期范围过滤数据答案

【问题标题】：ng-repeat filtering data by date range using ui bootstrap dateng-repeat 使用 ui bootstrap date 按日期范围过滤数据
【发布时间】：2023-03-27 12:43:01
【问题描述】：

我希望能够通过从 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>

此外，我希望能够使用日期选择器中的值填充“发件人”字段以及“收件人”字段，以便仅获取此范围内的记录。

【问题讨论】：

如果你的控制器代码有一个 plunker 会更容易为你提供帮助。

标签： angularjs twitter-bootstrap laravel datepicker

【解决方案1】：

我不知道我是否正确理解了这个问题，但试试这个：将 ui.bootstrap 注入您的 Angular 应用程序并更改此行

<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-repeat 部分更改为此

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

【讨论】：