angularjs日期时间排序在桌面上不能正常工作

时间:2016-09-22 07:12:22

标签: angularjs sorting filter

我的后端有示例数据集(如下),我将它传递给angularjs表。当我对日期列进行排序时,它采用格式化(通过使用日期过滤器)日期字符串进行排序,而不是将实际的长日期排序。

JSON数据

{
    "_id": ObjectId("57e21d452679a426808caa09"),
    "name": "John",
    "createdOn": NumberLong(1474436421360)
}

HTML

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Created Time</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="user in users">
            <td>{{ user.name }}</td>
            <td>{{ user.createdOn | date : 'dd/MM/yy HH:mm' : timezone }}</td>
        </tr>
    </tbody>
</table>

1 个答案:

答案 0 :(得分:0)

您需要实施排序

检查以下示例。

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);

function DefaultController() {
  var vm = this;
  vm.users = [
    { id: 1, name: 'John', date: 1474436481360 },
    { id: 2, name: 'Dale', date: 1444936421360 },
    { id: 3, name: 'Torres', date: 1464445481360 }
  ];
}
table {
  border-collapse: collapse;
}

th {
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
}

th:hover {
  text-decoration: underline;
}

th, td {
  padding: 15px;
  text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <table border="1">
      <thead>
        <tr>
          <th ng-click="ctrl.sortBy = 'name'; ctrl.sortOrder = !ctrl.sortOrder">Name</th>
          <th ng-click="ctrl.sortBy = 'date'; ctrl.sortOrder = !ctrl.sortOrder">Created On</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="user in ctrl.users | orderBy: ctrl.sortBy : ctrl.sortOrder">
          <td ng-bind="user.name"></td>
          <td ng-bind="user.date | date : 'dd/MM/yy HH:mm'"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>