Сортировка дат в интерфейсе AngularJS

Question

У меня есть таблица с несколькими записями и датой их создания. Данные $scope выглядит следующим образом:

$scope.data = [{ 
    "FeeId": "17", 
    "FirmName": "LAWFIRM1", 
    "countryId": "IN", 
    "filing": "REI-Reissue", 
    "agentFeeCode": "AGNT", 
    "feeType": "GOVT", 
    "Term": "Fixed", 
    "Amount": "150", 
    "comments": "test comment", 
    "startDate": "13-DEC-16" 
},{ 
    "FeeId": "18", 
    "FirmName": "LAWFIRM2", 
    "countryId": "IN", 
    "filing": "REI-Reissue", 
    "agentFeeCode": "AGNT", 
    "feeType": "GOVT", 
    "Term": "Open", 
    "Amount": "150", 
    "comments": "test comment", 
    "startDate": "11-DEC-16" 
}] 

Мне нужен AngularJS фронтэнда на основе сортировки на по startDate. В настоящее время он не работает с датой в формате string.

Как я могу сортировать свои данные по startDate в frontend используя AngularJS?

Answer 1

Пока ваш формат даты 13-DEC-16 является обычным для общего ISO-Dates его трудно разобрать на эту дату. Таким образом, я изменил формат с 13-DEC-16 на 13-12-16. Надеюсь, вы сможете изменить структуру данных API. Просто подсказка, было бы хорошим улучшением, если вы используете формат ISO-Date внутри вашего API. Таким образом, другая система/языки смогут обрабатывать эту дату.

Я бы предпочел решение, используя moment.js, который предоставляет хорошие помощники, используя даты в JavaScript. Вам необходимо проанализировать дату, чтобы обеспечить правильную сортировку даты в AngularJS. Пока что вы не можете использовать AngularJS filterorderBy сортировать по дате в вашем веб-интерфейсе:

filter:orderBy(array, expression[, reverse]); 

Ваше мнение будет выглядеть следующим образом:

<div class="wrapper"> 
    <div ng-repeat="item in data|orderBy:'startDate'"> 
     {{ item }} 
    </div> 
</div> 

Ваш контроллер будет выглядеть следующим образом:

//init scope data 
$scope.data = [ 
    { 
     "FeeId": "17", 
     "FirmName": "LAWFIRM1", 
     "countryId": "IN", 
     "filing": "REI-Reissue", 
     "agentFeeCode": "AGNT", 
     "feeType": "GOVT", 
     "Term": "Fixed", 
     "Amount": "150", 
     "comments": "test comment", 
     "startDate": "13-12-16" 
    },{ 
     "FeeId": "18", 
     "FirmName": "LAWFIRM12", 
     "countryId": "IN", 
     "filing": "REI-Reissue", 
     "agentFeeCode": "AGNT", 
     "feeType": "GOVT", 
     "Term": "Fixed", 
     "Amount": "150", 
     "comments": "test comment", 
     "startDate": "14-12-16" 
    },{ 
     "FeeId": "19", 
     "FirmName": "LAWFIRM12", 
     "countryId": "IN", 
     "filing": "REI-Reissue", 
     "agentFeeCode": "AGNT", 
     "feeType": "GOVT", 
     "Term": "Fixed", 
     "Amount": "150", 
     "comments": "test comment", 
     "startDate": "11-12-16" 
    } 
]; 

/** 
* Parse custom date format with moment js 
*/ 
angular.forEach($scope.data, function (item, key) { 
    $scope.data[key].startDate = new moment(item.startDate, "DD-MM-YY")._d; 
}); 

Answer 2

Используйте объект преобразования вместе с substr и parseInt, чтобы сравнить часть строки даты, но, пожалуйста:

//Month conversion object 
 
var months = { 
 
    NOV: 11, 
 
    DEC: 12 
 
}; 
 
//Sort function 
 
function sortByDate(a, b) { 
 
    return (
 
     //Year 
 
     parseInt(a.startDate.substr(7, 2)) - parseInt(b.startDate.substr(7, 2)) || 
 
     //Month 
 
     months[a.startDate.substr(3, 3)] - months[b.startDate.substr(3, 3)] || 
 
     //Day 
 
     parseInt(a.startDate.substr(0, 2)) - parseInt(b.startDate.substr(0, 2))); 
 
    } 
 
    //The list to sort 
 
var list = [{ 
 
    "FeeId": "17", 
 
    "FirmName": "LAWFIRM1", 
 
    "countryId": "IN", 
 
    "filing": "REI-Reissue", 
 
    "agentFeeCode": "AGNT", 
 
    "feeType": "GOVT", 
 
    "Term": "Fixed", 
 
    "Amount": "150", 
 
    "comments": "test comment", 
 
    "startDate": "13-DEC-16" 
 
}, { 
 
    "FeeId": "17", 
 
    "FirmName": "LAWFIRM1", 
 
    "countryId": "IN", 
 
    "filing": "REI-Reissue", 
 
    "agentFeeCode": "AGNT", 
 
    "feeType": "GOVT", 
 
    "Term": "Fixed", 
 
    "Amount": "150", 
 
    "comments": "test comment", 
 
    "startDate": "13-NOV-16" 
 
}, { 
 
    "FeeId": "17", 
 
    "FirmName": "LAWFIRM1", 
 
    "countryId": "IN", 
 
    "filing": "REI-Reissue", 
 
    "agentFeeCode": "AGNT", 
 
    "feeType": "GOVT", 
 
    "Term": "Fixed", 
 
    "Amount": "150", 
 
    "comments": "test comment", 
 
    "startDate": "13-DEC-15" 
 
}, { 
 
    "FeeId": "17", 
 
    "FirmName": "LAWFIRM1", 
 
    "countryId": "IN", 
 
    "filing": "REI-Reissue", 
 
    "agentFeeCode": "AGNT", 
 
    "feeType": "GOVT", 
 
    "Term": "Fixed", 
 
    "Amount": "150", 
 
    "comments": "test comment", 
 
    "startDate": "13-NOV-16" 
 
}]; 
 
//Sorting the list 
 
console.log(list 
 
    .sort(sortByDate));

Answer 3

Попробуйте эту рабочую демо:

var app = angular.module('myApp',[]); 
 
app.controller('myCtrl',function($scope) { 
 
$scope.jsonObj = [{ 
 
    "FeeId": "1", 
 
    "FirmName": "ABC", 
 
    "countryId": "IN", 
 
    "filing": "REI-Reissue", 
 
    "agentFeeCode": "AGNT", 
 
    "feeType": "GOVT", 
 
    "Term": "Fixed", 
 
    "Amount": "150", 
 
    "comments": "test comment", 
 
    "startDate": "13-DEC-16" 
 
}, 
 
{ 
 
    "FeeId": "2", 
 
    "FirmName": "XYZ", 
 
    "countryId": "IN", 
 
    "filing": "REI-Reissue", 
 
    "agentFeeCode": "AGNT", 
 
    "feeType": "GOVT", 
 
    "Term": "Fixed", 
 
    "Amount": "150", 
 
    "comments": "test comment", 
 
    "startDate": "13-NOV-16" 
 
}]; 
 

 
for(var i in $scope.jsonObj) { 
 
    $scope.jsonObj[i].startDate = Date.parse($scope.jsonObj[i].startDate); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="myCtrl"> 
 
     <div ng-repeat="item in jsonObj | orderBy:'startDate'">{{item.FirmName}}: {{item.startDate | date}}</div> 
 
    </div> 
 
</div>