按日期对Angularjs ng-repeat进行排序

时间:2022-12-02 15:36:04

I am relatively new to AngularJS. Could use some help

我对AngularJS比较陌生。可以使用一些帮助

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>

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

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

$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).

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

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

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

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.

我理解我犯的错误,但我无法找到它的解决方案。

How can I sort by date?

我该如何按日期排序?

Thanks in advance guys.

先谢谢你们。

2 个解决方案

#1


1  

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

理想情况下,你有一个可排序的日期对象。一个候选人是一个isoformatted日期:

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:

现在排序应该工作得很好,但它会显示不稳定。因此,您需要使用日期过滤器在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>

#2


0  

As you have noticed, the value you receive is type of string and therefore it is sorted alphabetically. You need to convert it into Date() beforehand. So basically what you need is to loop over the array of data you got and add a new property (or replace existing one) with a new Date object:

您已经注意到,您收到的值是字符串的类型,因此按字母顺序排序。您需要事先将其转换为Date()。所以基本上你需要的是遍历你得到的数据数组,并用一个新的Date对象添加一个新属性(或替换现有的属性):

referral.forEach((ref) => {
    ref.date_obj = new Date(ref.date)
};

I just checked, JavaScript seems to be parsing format "September 13, 2016" pretty well.

我刚刚检查过,JavaScript似乎解析格式“2016年9月13日”非常好。

#1


1  

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

理想情况下,你有一个可排序的日期对象。一个候选人是一个isoformatted日期:

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:

现在排序应该工作得很好,但它会显示不稳定。因此,您需要使用日期过滤器在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>

#2


0  

As you have noticed, the value you receive is type of string and therefore it is sorted alphabetically. You need to convert it into Date() beforehand. So basically what you need is to loop over the array of data you got and add a new property (or replace existing one) with a new Date object:

您已经注意到,您收到的值是字符串的类型,因此按字母顺序排序。您需要事先将其转换为Date()。所以基本上你需要的是遍历你得到的数据数组,并用一个新的Date对象添加一个新属性(或替换现有的属性):

referral.forEach((ref) => {
    ref.date_obj = new Date(ref.date)
};

I just checked, JavaScript seems to be parsing format "September 13, 2016" pretty well.

我刚刚检查过,JavaScript似乎解析格式“2016年9月13日”非常好。