如何按时间范围过滤ng-repeat数据

How to filter ng-repeat data by time range?

本文关键字：ng-repeat 数据 过滤 范围 何按 时间      更新时间：2023-09-26

我正在创建一个应用程序，它将使用第三方API提供航班列表。我在过滤不同日期和时间格式的两个时间之间遇到了问题，我已经阅读了很多教程，但都只使用日期，但我需要使用不同日期和时间格式的时间进行过滤。

JSON

"Combination": [        
    "OutboundLeg" :{
            "DepartureDateTime": "07/14/2015 12:00"
    }
    "OutboundLeg" :{
            "DepartureDateTime": "07/15/2015 10:55"
    }
    "OutboundLeg" :{
            "DepartureDateTime": "07/18/2015 12:10"
    }
    "OutboundLeg" :{
            "DepartureDateTime": "07/14/2015 10:10"
    }
    "OutboundLeg" :{
            "DepartureDateTime": "07/18/2015 12:00"
    }
]


<div ng-repeat="data in Combination | filterBtwnTime: ??? ">
    <td>{{data.OutboundLeg.DepartureDateTime}}</td> 
</div>

如何做到这一点?

首先，您拥有的数据是不正确的，因为您有一个具有相同键的对象，因此只有OutboundLeg的最后一个值将被考虑。你有一个只有一个对象的数组，它多次使用相同的键。

你需要一个对象数组，因为angular 过滤器只对数组起作用。

模板:

<div ng-app="app"> 
<div ng-controller="MyController"> 
    <div ng-repeat="data in Combination | dateFilter:startDate:endDate ">
        <div ng-bind="data.DepartureDateTime "></div> 
    </div>
</div>

过滤器:

function dateFilter() {
  return function(input, start, end) {
    var inputDate = new Date(input),
        startDate = new Date(start),
        endDate = new Date(end),
        result = [];
    for (var i=0, len = input.length; i < len; i++) {
        inputDate = new Date(input[i].DepartureDateTime);            
        if (startDate < inputDate && inputDate < endDate) {
           result.push(input[i]);
        }  
    }       
    return result;      
  }
}

完整的代码可以在我创建的小更新数组中找到，该数组过滤定义的开始日期和结束日期之间的日期。您可以根据需要对其进行调整。

提琴-两个日期之间的过滤器

——过滤ng-repeat

您可以使用date过滤器，它允许您根据请求的格式样式来格式化日期。日期格式化程序提供了几个内置选项。

如果没有传递日期格式，则默认显示mediumDate(如下所示)。

以下是内置的可本地化格式:

{{ data | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ data | date:'short' }} <!-- 8/9/13 12:09 PM -->
{{ data | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ data | date:'longDate' }} <!-- August 09, 2013 -->
{{ data | date:'mediumDate' }} <!-- Aug 09, 2013 -->
{{ data | date:'shortDate' }} <!-- 8/9/13 -->
{{ data | date:'mediumTime' }} <!-- 12:09:02 PM -->
{{ data | date:'shortTime' }} <!-- 12:09 PM -->

你可以试试:

<div ng-repeat="data in Combination | date: 'medium' ">
    <td>{{data.OutboundLeg.DepartureDateTime}}</td> 
</div>

你可以像这样使用一个函数作为过滤器

HTML

<li ng-repeat="c in combinations | filter:ofYear(2015)">{{c.name}}</li>
控制器

$scope.ofYear = function(year) {
  return function(c) {
    return c.date.getFullYear() === year;
  }
}

http://plnkr.co/edit/vxIewUDGDjiz80W1Itag?p =预览

相关文章：