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

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：

\n\n

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

\n\n

对于排序onclick，您可以将一个变量添加到确定排序的范围并在 上使用该orderBy变量ng-repeat。

\n\n

像这样的东西：

\n\n

<table st-table="displayedCollection" st-safe-src="playerCollection" class="table table-hover">\n  <thead>\n    <tr>\n        <th st-sort="id" class="hover"><a href="" ng-click="predicate = \'id\'; reverse=false">Id</a></th>\n        <th st-sort="firstname" class="hover"><a href="" ng-click="predicate = \'firstname\'; reverse=false">Jm\xc3\xa9no</a></th>\n        <th st-sort="lastname" class="hover"><a href="" ng-click="predicate = \'lastname\'; reverse=false">P\xc5\x99\xc3\xadjmen\xc3\xad</a></th>\n        <th st-sort="registrationDate" class="hover"><a href="" ng-click="predicate = \'registrationDate\'; reverse=false">Datum registrace</a></th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr ng-repeat="player in displayedCollection | orderBy:predicate:reverse">\n        <td class="hover">{{player.id}}</td>\n        <td class="hover">{{player.firstname}}</td>\n        <td class="hover">{{player.lastname}}</td>\n        <td class="hover">{{player.registrationDate}}</td>\n    </tr>\n  </tbody>\n</table>\n

\n\n

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

\n\n

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

\n