如何在智能表中按日期对项目进行排序

Question

如何在智能表中按日期对数据进行排序？使用 st-sort 它不是那么好。

<table st-table="displayedCollection" st-safe-src="playerCollection" class="table table-hover">
      <thead>
        <tr>
            <th st-sort="id" class="hover">Id</th>
            <th st-sort="firstname" class="hover">Jméno</th>
            <th st-sort="lastname" class="hover">Příjmení</th>
            <th st-sort="registrationDate" class="hover">Datum registrace</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="player in displayedCollection">
            <td class="hover">{{player.id}}</td>
            <td class="hover">{{player.firstname}}</td>
            <td class="hover">{{player.lastname}}</td>
            <td class="hover">{{player.registrationDate}}</td>
        </tr>
      </tbody>
  </table>

感谢您的回答。

Answer 1

它应该可以正常工作（参见文档网站）。但是，如果您的注册日期是日期字符串，您应该使用 getter 来返回它的日期对象版本，否则您将拥有 alphaNumeric 顺序

在你的控制器中

$scope.getters = {
   registrationDate:function(row) {
      return new Date(row.registrationDate);
   }
}

所以你可以将你的标题绑定到这个getter

<th st-sort="getters.registrationDate">Datum registrace</th>

Answer 2

将订单添加到您的ng-repeat，如下所示：

<tr ng-repeat="player in displayedCollection | orderBy:'registrationDate'">
   <td class="hover">{{player.id}}</td>
   <td class="hover">{{player.firstname}}</td>
   <td class="hover">{{player.lastname}}</td>
   <td class="hover">{{player.registrationDate}}</td>
</tr>

为了对onclick 进行排序，您可以在确定排序的范围内添加一个变量，并在ng-repeat 上的orderBy 上使用该变量。

类似这样的：

<table st-table="displayedCollection" st-safe-src="playerCollection" class="table table-hover">
  <thead>
    <tr>
        <th st-sort="id" class="hover"><a href="" ng-click="predicate = 'id'; reverse=false">Id</a></th>
        <th st-sort="firstname" class="hover"><a href="" ng-click="predicate = 'firstname'; reverse=false">Jméno</a></th>
        <th st-sort="lastname" class="hover"><a href="" ng-click="predicate = 'lastname'; reverse=false">Příjmení</a></th>
        <th st-sort="registrationDate" class="hover"><a href="" ng-click="predicate = 'registrationDate'; reverse=false">Datum registrace</a></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="player in displayedCollection | orderBy:predicate:reverse">
        <td class="hover">{{player.id}}</td>
        <td class="hover">{{player.firstname}}</td>
        <td class="hover">{{player.lastname}}</td>
        <td class="hover">{{player.registrationDate}}</td>
    </tr>
  </tbody>
</table>

我为此创建了一个 plunker。您将看到如果您单击列标题，它将按该列对表格进行排序。希望对你有帮助。

http://plnkr.co/edit/pAJ3PpRwVk7PuTmoMjsr?p=preview

Answer 3

我将添加另一个与@laurent 答案相关的可能解决方案。他的解决方案在我的情况下不起作用，所以我改变了一点吸气剂：

$scope.getters = {
   registrationDate:function(row) {
      return (new Date(row.registrationDate)).getTime();
   }
}

getTime() 返回自 1970/01/01 以来的毫秒数，因此该列将按数字而不是日期排序（在我的情况下它不起作用，我不知道为什么）和结果是一样的。