Question

我正在创建一个使用第三方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"
    }
]

HTML

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

如何实现这个目标？

Answer 1

首先，您拥有的数据不正确，因为您有一个具有相同密钥的对象，只会考虑 OutboundLeg 的最后一个值。你有一个包含一个对象的数组，它具有多次相同的键。

您需要一个对象数组，因为有角度的过滤器仅适用于数组。

模板：

<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;      

  }
}

完整的代码可以在我创建的小提琴中找到，在数组上有一个小的更新，它可以过滤定义的开始日期和结束日期之间的日期。您可以根据需要调整此示例。

Fiddle - filter between two dates

更新 - 过滤ng-repeat

Answer 2

您可以使用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>

Answer 3

您可以使用此功能作为此过滤器

HTML

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

CONTROLLER

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

http://plnkr.co/edit/vxIewUDGDjiz80W1Itag?p=preview

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

3 个答案: