如何按時間范圍過濾ng-repeat數據？

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的最后一個值。 您有一個帶有一個對象的數組，該對象多次具有相同的鍵。

您需要一個對象數組，因為角度濾鏡僅適用於array 。

模板：

<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

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