在Angularjs Frontend中对日期进行排序

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格式的日期。

如何使用AngularJS在前端通过startDate对数据进行排序？

Answer 1

尝试此工作演示：

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>

Answer 2

虽然您的日期格式13-DEC-16自定义为常见的ISO日期很难解析。这样，我将您的格式从13-DEC-16更改为13-12-16。希望您能够更改API数据结构。只是一个提示，如果您在API内使用ISO-ETATE格式，那将是一个不错的改进。因此其他系统/语言也可以处理该日期。

我将使用Moment.js来备份解决方案，该解决方案通过在JavaScript中使用日期提供了不错的助手。您需要分析日期，以确保在AngularJs中进行正确的日期排序。在此之前，您可以使用AngularJS Filter orderBy按日期按日期进行排序：

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 3

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