为了账号安全,请及时绑定邮箱和手机立即绑定

ng-repeat按日期范围过滤数据

/ 猿问

ng-repeat按日期范围过滤数据

若吾皇 2019-09-26 10:14:25

我正在尝试通过键入日期范围来过滤包含时间戳的列表

例如:

的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"
  }]});

我希望能够用值填充“发件人”字段:27-05-2010

并且“ To”字段的值为:29-07-2015

并仅获取该范围内的记录。

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

谢谢分配阿维



查看完整描述

3 回答

?
慕标琳琳

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

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

另外,我将时间戳记数据类型从字符串更改为数字。

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


查看完整回答
反对 回复 2019-09-26
?
慕田峪7331174

我使用momentJS创建了一个过滤器,以使事情变得简单:

.filter('dateRange', function() {
    return function(items, startDate, endDate) {
        var retArray = [];

        if (!startDate && !endDate) {
            return items;
        }
        angular.forEach(items, function(obj) {
            var receivedDate = obj.date;
            if (moment(receivedDate).isAfter(startDate) && moment(receivedDate).isBefore(endDate)) {
                retArray.push(obj);
            }
        });

        return retArray;

    }})


查看完整回答
反对 回复 2019-09-26
?
45度呼吸

对于时间操纵,我强烈建议使用诸如momentJS之类的库;使用momentJS和现代浏览器,可以以非常声明的方式实现:

.filter('dateRange', function() {
  return function(items, startDate, endDate) {
    //an undefined startDate is converted to the beginning of time
    startDate = startDate || 0;

    const granularity = null // can be 'days', ... see momentJS doc

    //you need support for array.prototype.filter and arrow functions; i.e. IE sucks/needs a polyfill   
    return items.filter(item => moment(item).isBetween(startDate, endDate, granularity, '[]'));
  }}


查看完整回答
反对 回复 2019-09-26

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信