按日期对Angularjs ng-repeat进行排序 [英] Sorting Angularjs ng-repeat by date

查看:335
本文介绍了按日期对Angularjs ng-repeat进行排序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对AngularJS比较陌生.可以帮忙

I am relatively new to AngularJS. Could use some help

我有一张包含以下信息的表

I have a table with the following info

<table>
 <tr>
  <th><span ng-click="sortType = 'first_name'; sortReverse = !sortReverse">Referral Name</span></th>
  <th><span ng-click="sortType = 'date'; sortReverse = !sortReverse">Referral Name</span></th>
 </tr>
 <tr ng-repeat="x in referral | orderBy:sortType:sortReverse">
  <td>name</td>
  <td>date</td>
 </tr>
</tabe>

并且js代码如下(在控制器连接之后)

And the js code is as follows (after the controller connections)

$scope.sortType = '';
$scope.sortReverse = false;

这对排序名称时的升序和降序非常有用.

This works perfectly for ascending and descending when sorting the name.

不幸的是,它在日期的情况下也类似(它是按字母顺序而不是按日期排序).

Unfortunately it works similarly in the case of date too (it is sorting alphabetically, rather than by date).

我从后端(python)获取的日期格式为以下格式:

The date format I am getting from the backend(python) is in this format:

i["date"] = i["date"].strftime("%B %d, %Y")
September 13, 2016 <-- this format

我了解自己犯的错误,但无法找到解决方案.

I understand the mistake I made, but I am not able to find the solution for it.

如何按日期排序?

预先感谢大家.

推荐答案

理想情况下,您将有一个可排序的日期对象.一个候选者是同格式的日期:

Ideally you'd have a sortable object for date. One candidate is an isoformatted date:

i["date"] = i["date"].isoformat()

现在排序应该可以正常工作,但会显示出奇特的效果.因此,您需要使用日期过滤器在用户界面上设置其格式:

Now sorting should work just fine but it'll display wonky. So you'll need to use a date filter to format it on the UI:

<table>
 <tr>
  <th><span ng-click="sortType = 'first_name'; sortReverse = !sortReverse">Referral Name</span></th>
  <th><span ng-click="sortType = 'date'; sortReverse = !sortReverse">Referral Name</span></th>
 </tr>
 <tr ng-repeat="x in referral | orderBy:sortType:sortReverse">
  <td>name</td>
  <td>{{x.date | date : 'MMMM d, yyyy'}}</td>
 </tr>
</table>

这篇关于按日期对Angularjs ng-repeat进行排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆