Question

我希望使用AngularJS中的OrderBy按日期对数据进行排序，并在此基础上显示最新数据。

问题在于orderBy正在排序仅考虑一天的数据。我希望它考虑所有因素，如月份和年份。

以下是我正在处理的代码。

的script.js

angular.module('Timeline', [])
.component("changeLog", {
  templateUrl: 'changeLog.html',
  controller: ('timelineController', timelineController)
});
function timelineController() {
  this.logs = [
    {
      "date": "01/7/2022",
      "title": "Change Log1",
      "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "link": "www.enquero.com"
    },
    {
      "date": "09/2/2018",
      "title": "User Analysis",
      "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "link": "www.google.com"
    },
    {
      "date": "11/2/2019",
      "title": "User Analysis",
      "desc": "This cool new feature has been added recently, maybe you should have a look.",
      "link": "www.google.com"
    },
  ];
}

changeLog.html

<div class="logArena" ng-repeat="log in $ctrl.logs | orderBy: '-date'">

  <ul class="timeline">
    <li>
      <span class="direction-l">
        <span class="time-wrapper">
          <span class="time">
              {{log.date}}
          </span>
        </span>
      </span>

      <div class="direction-r">
        <div class="flag-wrapper">
          <div class="flag">{{log.title}}</div>
        </div>
        <div class="desc">
          {{log.desc}}
        </div>
      </div>

    </li>
  </ul>

的index.html

<!DOCTYPE html>
<html ng-app="Timeline">
  <head>
    <title>Timeline App</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div>
      <center><h3>ChangeLog Wiki</h3></center>
      <change-log></change-log>
    </div>
  </body>
</html>

Answer 1

在角度方面，您可以从您拥有的日期添加日期对象，并使用该属性进行过滤。

$scope.logs.forEach(function(log){
 log.dateObj = new Date(log.date);
})

将changeLog.html中的第一行更改为 <div class="logArena" ng-repeat="log in $ctrl.logs | orderBy: '-dateObj'">

使用orderBy按日期对数据进行排序仅按当天的数量而不是按年份对数据进行排序。 [AngularJS]

1 个答案: