当前位置: 首页 > 面试题库 >

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

须捷
2023-03-14
问题内容

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

例如:

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

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

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

谢谢分配阿维


问题答案:

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

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


 类似资料:
  • 我正在使用弹性搜索。我以前从未使用过的网络NEST客户端。我想做的是在得分前按日期范围过滤结果。 我使用对象初始值设定项语法,因为它最适合我。 我已经完成了我想要的: 这给了我一个JSON请求,就像我期望的那样: 但留档过滤查询说"弃用在2.0.0-beta1.改为使用bool查询,查询的必须子句和筛选器子句”。 因为这是我发现的唯一包含过滤器的方法,有没有更好的方法来使用嵌套对象初始值设定项语法

  • 问题内容: 我想知道Angular中是否有一种简单的方法,可以使用特定的列(而非逻辑)来过滤表。现在,当我的过滤器实际上只需要过滤2列数据(ID和Name)时,它就会搜索表中的所有内容(10列以上的数据)。 我设法使它仅在过滤时仅查看这两列(通过根据文档在过滤器表达式中使用一个对象并查看此SO答案,但是它使用的是逻辑,太具体了。我想让它使用逻辑,但是遇到了麻烦。 我的HTML 我的过滤逻辑: 过滤

  • 问题内容: 我有许多产品要重复使用ng-repeat,并且正在使用 按颜色过滤这些产品。过滤器正在运行,但是如果产品名称/说明等包含颜色,则在应用过滤器后该产品仍然存在。 如何将滤镜设置为仅应用于数组的颜色字段而不是每个字段? 问题答案: 请参阅过滤器页面上的示例。使用一个对象,并在color属性中设置颜色:

  • 问题内容: 我正在使用Elasticsearch 6.6,尝试根据在日期范围内传递给查询(Bool)的多个值(email_address)提取多个结果/记录。例如:我想根据他们的email_address(annie@test.com,charles@test.com,heman@test.com)以及时期(即project_date(2019-01-01))提取有关少数雇员的信息。 我确实使用了

  • 问题内容: 通过这个简单的功能,我可以获得星期几。现在,用星期几,如何获取从星期日开始的日期范围? 欢迎任何帮助。谢谢。 问题答案: 前言: 返回您从星期一开始的星期数,因此我将回答您的问题,该问题也处理从星期一开始的星期。如果您希望它在周日开始的几周内工作,请根据需要进行更改。 我在中发布了该实用程序,请参见。 标准库没有提供可以返回给定星期(年+周数)的日期范围的函数。因此,我们必须自己构建。

  • 问题内容: 我的服务器的CPU使用率异常高,我可以看到Apache使用了太多的内存。我有一种感觉,我被一个IP所包围-也许您可以帮助我找到他? 我使用以下行来查找10个最“活跃”的IP: 前5个IP对服务器的请求大约是“平均”用户的200倍。但是,我无法确定这5位访问者是否只是非常频繁的访问者,或者他们正在攻击服务器。 有没有办法将上述搜索指定到一个时间间隔,例如 最近两个小时还是今天的10到12