Angular JS orderBy 不适用于日期答案

【问题标题】：Angular JS orderBy is not working with DatesAngular JS orderBy 不适用于日期
【发布时间】：2017-10-07 12:02:15
【问题描述】：

orderBy 功能不适用于我尝试在ng-repeat 中使用的日期

这里我想根据executedOn对条目进行排序

我想对元素进行排序，最新日期应该反映在顶部。

谁能帮帮我

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {

    $scope.details = [
  {
    "id": 255463,
    "orderId": 226433,
    "status": 1,
    "executedOn": "25/Sep/17",
    "executedBy": "Person A",
    "executedByDisplay": "Person A",
    "cycleId": 4042,
    "cycleName": "Cycle A",
    "versionId": 21289,
    "versionName": "Version A",
    "issueKey": "A"
  },
  {
    "id": 255433,
    "orderId": 226403,
    "status": 1,
    "executedOn": "1/Mar/17",
    "executedBy": "Person B",
    "executedByDisplay": "Person B",
    "cycleId": 4041,
    "cycleName": "Cycle B",
    "versionId": 21289,
    "versionName": "Version A",
    "issueKey": "B"
  },
  {
    "id": 255432,
    "orderId": 226402,
    "status": 1,
    "executedOn": "1/Apr/17",
    "executedBy": "Person B",
    "executedByDisplay": "Person B",
    "cycleId": 4041,
    "cycleName": "Cycle B",
    "versionId": 21289,
    "versionName": "Version A",
    "issueKey": "C"
  }
];
});

th, td {
    border-bottom: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">


  <body ng-controller="MainCtrl">
  <table class="table h6">
        <thead>
          <tr>
            <th>#</th>
            <th>Cycle Name</th>
            <th>Execution Completed</th>
            <th>Total Test Cases</th>
          </tr>
        </thead>
        <tr ng-repeat="x in details | orderBy :'executedOn'">
          <td>{{$index+1}}</td>
          <td>{{x.cycleName}}</td>
          <td>{{x.executedOn | date:'d-MMM-yy'}}</td>
          <td>{{x.versionName}}</td>
        </tr>
      </table>
  </body>

</html>

【问题讨论】：

看看：this one 和 this one
@a.u.b 不，我在发布问题之前已经解决了这个问题，我的问题甚至根本没有做 orderBy，你上面说的那个是反向 orderBy 的问题
@Mozhdeh.Hamidi 谢谢我正在检查他们！！

标签： angularjs angularjs-ng-repeat angularjs-orderby

【解决方案1】：

如何将"executedOn" 转换为Date 对象：new Date("25/Sep/17"),

你可以这样做：

$scope.details.map(function(item){
    item.executedOn = new Date(item.executedOn);
    return item;
  });

排序将正常工作

    <tr ng-repeat="x in details | orderBy :'executedOn'">
      <td>{{$index+1}}</td>
      <td>{{x.cycleName}}</td>
      <td>{{x.executedOn | date:'d-MMM-yy'}}</td>
      <td>{{x.versionName}}</td>
    </tr>

Demo Plunker

【讨论】：

谢谢！！像魅力一样工作
任何原因这在 Chrome 和 Firefox 中的行为不同，有什么方法可以处理
我可以使用 date.js 框架处理谢谢！！ http://www.datejs.com/

【解决方案2】：

您可以使用 A getter 函数作为 orderBy 表达式。该函数将使用每个项目作为参数调用，返回值将用于排序。 see details in demo

$scope.makerightorder = function(x){
   return new Date(x.executedOn);
}

显然使用 true 作为第二个参数来查看最新的优先

html

<tr ng-repeat="x in details | orderBy :makerightorder:true ">
    <td>{{$index+1}}</td>
    <td>{{x.cycleName}}</td>
    <td>{{x.executedOn | date:'d-MMM-yy'}}</td>
    <td>{{x.versionName}}</td>
 </tr>

【讨论】：