[英]Custom sort in AngularJS
我需要對看起來像這樣的對象進行排序:
{id: x, startDate:"mm/yyyy", endDate:"mm/yyyy", title:"xxxx", ...}
{id: y, startDate:"mm/yyyy", endDate:"", title:"xxxx", ...}
我希望使用endDate
(最近結束的最先)對對象進行排序。 結束日期也可以為空,在這種情況下,對象仍處於活動狀態並且需要位於頂部。 如果結束日期相同,則應按開始日期排序,最近的排在最前面。
我不能做簡單的字符串比較,因為 10/2013 比 02/2010 更新。 所以比較應該在開始和結束日期以及年( date.substring(3,7)
)和月( date.substring(0,2)
)上工作。
編輯
在我看來,有以下幾點:
ng-repeat="project in ProfileController.person.projects|orderBy:dateSorter"
在我的控制器中:
$scope.dateSorter = function(project) {
return project.endDate.length ? -"9999" : -project.endDate.substring(3,7);
};
按 end year降序正確對項目進行排序。 現在我需要考慮月份,以及在結束日期相等的情況下的開始日期。
工作Plunker: http ://plnkr.co/edit/fXEzU8s8huS0HGFPDEnI?p=preview
HTML:
<table class="friend">
<tr>
<th>Id</th>
<th><a href="" ng-click="order('startDate', reverse); reverse=!reverse">Start Date</a></th>
<th><a href="" ng-click="order('endDate',reverse);reverse=!reverse">End Date</a></th>
<th>Title</th>
</tr>
<tr ng-repeat="item in items">
<td>{{item.id}}</td>
<td>{{item.startDate | date:'MM-yyyy'}}</td>
<td>{{item.endDate }}</td>
<td>{{item.title }}</td>
</tr>
</table>
JavaScript:
angular.module('myApp', [])
.controller('MyController', function($scope,$filter){
var orderBy = $filter('orderBy');
$scope.items = [
{id: 1, startDate:"02/2010", endDate:"02/2010", title:"Title1"},
{id: 2, startDate:"01/2010", endDate:"01/2010", title:"Title2"};
];
$scope.order = function(predicate, reverse) {
$scope.items = orderBy($scope.items, predicate, reverse);
};
});
您可以為 Array.prototype.sort() 提供一個比較函數。 您應該為它提供一個實現您的訂購規范的函數,如下所示:
function mmYyyyToDate(mmYyyy) {
return new Date(mmYyyy.substring(3,7), mmYyyy.substring(0, 2))
}
function compares(a, b) {
if (a.endDate && b.endDate) {
var aEndDate = mmYyyyToDate(a.endDate);
var bEndDate = mmYyyyToDate(b.endDate);
return aEndDate == bEndDate ? 0 : aEndDate < bEndDate ? -1 : 1
} else if (a.endDate) { return -1; }
} else if (b.endDate { return 1; }
} else {
var aStartDate = mmYyyyToDate(a.startDate);
var bStartDate = mmYyyyToDate(b.startDate);
return aStartDate == bStartDate ? 0 : aStartDate < bStartDate ? -1 : 1;
}
}
如果您需要對數組進行排序以進行顯示,您可以在過濾器中實現它,或者如果您希望始終對數據進行排序,則只需在控制器中調用它或提供服務。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.