Question

我希望通过date的两个输入显示date范围内的数据。（AngularJS日期过滤器的范围是两个输入）

这是我的代码

 var app = angular.module('app',[]).controller('ctrl1', function($scope){
            $scope.record = [
                 {uniqueID : 'pp-12', Name : 'Jim', status : 'Approved', Date:'05/01/2015' },
                 {uniqueID : 'pp-11', Name : 'Jim', status : 'Canceled', Date:'05/02/2015' },
                 {uniqueID : 'pp-45', Name : 'Nick', status : 'Pending', Date:'05/03/2015' },
                 {uniqueID : 'pp-32', Name : 'Thomas', status : 'Canceled', Date:'05/04/2015' },
                 {uniqueID : 'pp-01', Name : 'Thomas', status : 'Pending', Date:'05/05/2015' },
                 {uniqueID : 'pp-09', Name : 'Nick', status : 'Approved', Date:'05/06/2015' },
                 {uniqueID : 'pp-23', Name : 'Lina', status : 'Requested', Date:'05/07/2015'},
                 {uniqueID : 'pp-39', Name : 'Jim', status : 'Pending', Date:'05/08/2015' }
            ];
         });

  <input type="text" class="form-control" name="to" ng-model="to">
  <input type="text" class="form-control" name="from" ng-model="from"> 
        <table border="1">
            <thead>
            <tr>
                <td>Unique ID</td>
                <td>Name</td>
                <td>Status</td>
                <td>Date</td>
            </tr>
            </thead>

            <tbody>
            <tr ng-repeat="data in  record">
                <td> {{data.uniqueID}}</td>
                <td> {{data.Name}}</td>
                <td> {{data.status}}</td>
                <td> {{data.Date}}</td>
            </tr>
            </tbody>
        </table>

谢谢你的到来。

Answer 1

您可以为此目的定义custom filter，过滤记录数组并返回一个包含给定日期之间所有条目的数组：

.filter('dateRange', function() {
    return function(records, from, to) {
        return records.filter(function(record) {
            return record.Date >= from && record.Date <= to;
        });
    }
})

<tr ng-repeat="data in  record | dateRange : from : to">

Plunker ：http://plnkr.co/edit/smpnaDtY3vPmdCuw20bT?p=preview

PS：您应该向track by record.uniqueID添加ng-repeat。

Answer 2

如果您想要所有记录，如果用户没有输入from和to日期，那么请将过滤器更改为：

.filter('dateRange', function() {
    return function(records, from, to) {
        return records.filter(function(record) {
            if(from && to)
                return record.Date >= from && record.Date <= to;
            else
                return record.Date;
        });
    }
})

AngularJS日期过滤器的范围是两个输入

这是我的代码

2 个答案: