AngularJS中使用orderBy按日期排序仅识别日而非年月的问题

嘿，这个问题我之前也碰到过！核心原因是你的日期数据大概率是字符串格式（比如"DD/MM/YYYY"这类），AngularJS的orderBy过滤器对字符串会按字符顺序逐一比较，自然只会优先匹配"日"的数字，忽略了月和年的层级。咱们通过把字符串日期转换成JavaScript原生Date对象，让orderBy能按真实的时间顺序排序，具体修改如下：

1. 在script.js中预处理日期数据（推荐方案） #

提前把字符串日期转换成Date对象，性能比动态转换更好，适合数据量较大的场景。

假设你的原始数据是这样的：

var app = angular.module('myApp', []);
app.controller('changeLogCtrl', function($scope) {
  // 原始数据：date是字符串格式
  $scope.changeLogs = [
    { date: "15/03/2024", content: "更新用户中心功能" },
    { date: "20/02/2024", content: "修复支付流程bug" },
    { date: "10/03/2024", content: "新增移动端适配" }
  ];

  // 遍历数据，添加dateObj字段存储Date对象
  $scope.changeLogs.forEach(item => {
    // 按你的日期格式拆分（这里假设是DD/MM/YYYY）
    const [day, month, year] = item.date.split('/');
    // 注意：JavaScript的Date月份是0索引（0=1月），所以要减1
    item.dateObj = new Date(year, month - 1, day);
  });
});

如果你的日期是ISO标准格式（比如"2024-03-15"），转换更简单，直接用new Date(item.date)即可，不用拆分。

2. 在changeLog.html中使用orderBy排序 #

修改ng-repeat的过滤器，指定按转换后的dateObj字段降序排列（加负号-表示最新日期在前）：

<div ng-controller="changeLogCtrl">
  <h3>更新日志</h3>
  <div ng-repeat="log in changeLogs | orderBy:'-dateObj'">
    <p><strong>{{log.date}}</strong>：{{log.content}}</p>
  </div>
</div>

备选方案：用自定义过滤器动态转换日期 #

如果不想修改原始数据结构，可以写一个自定义过滤器，在排序时动态把字符串转成Date对象：

在script.js中添加过滤器 #

app.filter('strToDate', function() {
  return function(dateStr) {
    const [day, month, year] = dateStr.split('/');
    return new Date(year, month - 1, day);
  };
});

在changeLog.html中使用过滤器 #

<div ng-repeat="log in changeLogs | orderBy:'-date | strToDate'">
  <p><strong>{{log.date}}</strong>：{{log.content}}</p>
</div>

⚠️ 注意：这种方式每次排序都会执行转换，数据量大时可能影响性能，优先推荐第一种预处理方案。

3. 确保Index.html的依赖引入正确 #

确认你已经正确引入AngularJS和自己的脚本文件：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>更新日志</title>
  <!-- 引入本地AngularJS文件（避免外链） -->
  <script src="angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div ng-include="'changeLog.html'"></div>
</body>
</html>

这样修改后，orderBy就会按照完整的年-月-日顺序排序，最新的内容会显示在最前面啦！

内容的提问来源于stack exchange，提问作者s4tr2