按日期范围进行角度重复过滤数据

发布时间：2020-12-17 08:04:42 所属栏目：安全来源：网络整理

导读：我试图通过键入一系列日期来过滤包含时间戳的列表例如： JSFIDDLE HTML div ng-app="tst" div ng-controller="MyController" table tr tdFrom: input ng-model="query.date1" type="text" placeholder="" / /td tdTo: input ng-model="query.date2" type="t

我试图通过键入一系列日期来过滤包含时间戳的列表

例如：

JSFIDDLE

HTML

<div ng-app="tst">
    <div ng-controller="MyController">
        <table>
            <tr>
                <td>From:
                    <input ng-model="query.date1" type="text" placeholder="" />
                </td>
                <td>To:
                    <input ng-model="query.date2" type="text" placeholder="" />
                </td>
            </tr>

            <tr ng-repeat="order in orders |filter:query">
                <td>{{order.date1 * 1000 | date:'dd-MM-yyyy'}}</td>
                <td>{{order.date2 * 1000 | date:'dd-MM-yyyy'}}</td>
            </tr>
        </table>
    </div>
</div>

JavaScript的

var nameSpace = angular.module('tst',[]);

nameSpace.controller('MyController',function MyController($scope) {
  $scope.orders = [
  {
    "date1":"1306487800","date2":"1406587800"
  },{
    "date1":"1196487800","date2":"1406597800"
  }]
});

我想要能够填写“From”字段，值为：27-05-2010

“To”字段的值为：29-07-2015

并且只获取在此范围内的记录。

(示例中的第一个记录)。

谢谢分配
阿维

您可以创建自定义过滤器来实现此目标。

JSFIDDLE

HTML

<input ng-model="dateFrom" type="text"/>
<input ng-model="dateTo" type="text"/>
<tr ng-repeat="order in orders | myfilter:dateFrom:dateTo">
  <td>{{order.date1 * 1000 | date:'dd-MM-yyyy'}}</td>
  <td>{{order.date2 * 1000 | date:'dd-MM-yyyy'}}</td>
</tr>

JavaScript的

function parseDate(input) {
  var parts = input.split('-');
  return new Date(parts[2],parts[1]-1,parts[0]); 
}

nameSpace.filter("myfilter",function() {
  return function(items,from,to) {
        var df = parseDate(from);
        var dt = parseDate(to);
        var result = [];        
        for (var i=0; i<items.length; i++){
            var tf = new Date(items[i].date1 * 1000),tt = new Date(items[i].date2 * 1000);
            if (tf > df && tt < dt)  {
                result.push(items[i]);
            }
        }            
        return result;
  };
});

此外，我将时间戳记数据类型从字符串更改为numbres。

$scope.orders = [
  {
    "date1": 1306487800,"date2": 1406587800
  },{
    "date1": 1196487800,"date2": 1406597800
  }]

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!