在 AngularJS 前端对日期进行排序答案

【问题标题】：Sorting dates in AngularJS frontend在 AngularJS 前端对日期进行排序
【发布时间】：2016-12-19 08:50:36
【问题描述】：

我有一个表格，其中包含一些记录及其创建日期。 $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"
}]

我需要一个基于 startDate 排序的 AngularJS 前端。它目前不适用于 string 格式的日期。

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

【问题讨论】：

最后反馈，谢谢。

标签： javascript php angularjs json

【解决方案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>

【讨论】：

【解决方案2】：

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

我更喜欢使用 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;
});

【讨论】：

【解决方案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));

【讨论】：