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

Question

<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 中，它仍然只在 [=14= 中排序] 命令。

Answer 1

在angularjs中，排序是根据scope变量的格式，而不是html中的打印格式。如果你想使用 dd/mm/yyyy 格式对其进行排序，你必须在你的 js 文件中格式化日期并将其存储在像 'modified_date' 这样的键中通过循环遍历 'PackagesData' 对象然后键入 { {modified_date}} 在 html 中并按 'modified_date' 过滤。有一次我遇到同样的问题，但我是这样解决的。

Answer 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，根据这个描述，我们必须创建自定义函数，将我们的日期转换为一行，例如：

If we have 05/01/2006 => "dd/MM/yyyy"it should be 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>

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

orderBy is not working, when i formatted the content in the html

angularjs

angularjs-orderby