当我在 html 中格式化内容时，orderBy 不起作用答案

【问题标题】：orderBy is not working, when i formatted the content in the html当我在 html 中格式化内容时，orderBy 不起作用
【发布时间】：2025-12-05 14:00:01
【问题描述】：

<tr ng-repeat="data in PackagesData | orderBy : filterOption">
<td>{{data.name}}</td>
<td>{{data.packageType}}</td>
<td>{{convertDateFormatNormal(data.createdDate)}}</td>
</tr>

$scope.convertDateFormatNormal = function (date) {
        if(date){
            var dateFormatChange = new Date(date);
            var dateChanged = $filter('date')(dateFormatChange, "dd/MM/yyyy");
            return dateChanged;
        }
    };

orderBy 中的filterOption 可以是任何名称、packageType 或createdDate。但是名称和包类型按预期工作，但 orderBy 不适用于 createdDate，因为我将日期格式从 mm/dd/yyyy 转换为 dd/mm/yyyy 以显示在 HTML 中，但它仍然仅按 mm/dd/yyyy 顺序排序。

【问题讨论】：

这是个好问题

标签： angularjs angularjs-orderby

【解决方案1】：

在 Angular js 中，排序取决于范围变量的格式，而不是 html 中的打印格式。如果要使用 dd/mm/yyyy 格式对其进行排序，则必须在 js 文件中格式化日期，并通过循环通过“PackagesData”对象将其存储在“modified_date”之类的键中，然后键入 {{modified_date}}在 html 中并通过“modified_date”过滤它。曾经我遇到过同样的问题，但我以这种方式解决了。

【讨论】：

【解决方案2】：

此示例基于 orderBy 并专注于按完整日期订购，如果我们有 array 像这样：

[
  { createdDate: "2007-04-01T14:30" },
  { createdDate: "2006-01-05T14:30" },
  { createdDate: "2018-06-06T14:30" },
  { createdDate: "2015-03-08T14:30" },
  { createdDate: "2010-02-11T14:30" },
  { createdDate: "2010-01-12T14:30" }
];

顺序应该是yyyy，然后是MM，最后是dd，根据这个描述，我们必须创建自定义函数，将我们的日期转换为一行，例如：

如果我们有05/01/2006 => "dd/MM/yyyy"它应该是20060105 => "yyyyMMdd

记住结果应该是int而不是string

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

app.controller("ctrl", ["$scope", "$filter", function($scope, $filter) {

  $scope.array = [{
      name: "John",
      packageType: 1,
      createdDate: "2007-04-01T14:30"
    },
    {
      name: "Mike",
      packageType: 2,
      createdDate: "2006-01-05T14:30"
    },
    {
      name: "Mike",
      packageType: 2,
      createdDate: "2018-06-06T14:30"
    },
    {
      name: "Mike",
      packageType: 2,
      createdDate: "2015-03-08T14:30"
    },
    {
      name: "Mike",
      packageType: 2,
      createdDate: "2010-02-11T14:30"
    },
    {
      name: "Mike",
      packageType: 2,
      createdDate: "2010-01-12T14:30"
    }
  ];

  $scope.orderByFullDate = function(object) {
    var x = object.createdDate.split('/');
    var y = "";
    if (angular.isDefined(x[1])) {
      y = x[2] + x[1] + x[0];
    }
    return parseInt(y); //result of '05/01/2006' is: 20060105
  };

  $scope.convertDateFormatNormal = function(object) {
    if (object) {
      var dateFormatChange = new Date(object.createdDate);
      var dateChanged = $filter('date')(dateFormatChange, "dd/MM/yyyy");
      object.createdDate = dateChanged;
    }
  };


}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div ng-app="app" ng-controller="ctrl">
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="object in array | orderBy:orderByFullDate" ng-init="convertDateFormatNormal(object)">
      {{object.createdDate}}
    </li>
  </ul>
</div>

【讨论】：