Question

说我有这段代码：

<tr  ng-repeat-start="caseHistory in vm.caseHistory">
            <td >{{caseHistory.date | date:"dd-MMM-yyyy h:mm a"}}</td>
            <td >{{caseHistory.description}}</td>
            <td >{{caseHistory.performedByUser.firstName}} {{caseHistory.performedByUser.lastName}} ({{caseHistory.performedByUser.externalAssociateId}})</td>
            <td>
                <span ng-show="vm.showCreateCaseComments(caseHistory.eventType,caseHistory.comments)">
                    <a ng-if="caseHistory.expanded" class="removeTextDecoration headerPointer" ng-click="caseHistory.expanded = false"> -Collapse</a>
                    <a ng-if="!caseHistory.expanded" class="removeTextDecoration headerPointer" ng-click="caseHistory.expanded = true"> +Expand</a>
                </span>
            </td>
        </tr>

我希望它能显示出按时间顺序排列的日期排序的所有内容。

我需要在{{caseHistory.date | date:"dd-MMM-yyyy h:mm a"}}中添加什么才能按日期对所有结果进行排序？

Answer 1

您需要在此处添加管道：

<tr  ng-repeat-start="caseHistory in vm.caseHistory | orderBy:'caseHistory.date'">

您还可以添加＆＃39; - ＆＃39;用于指定升序与降序的符号。

可在此处找到文档： https://docs.angularjs.org/api/ng/filter/orderBy

Answer 2

使用orderBy过滤器并添加反向选项以降序

<tr  ng-repeat-start="caseHistory in vm.caseHistory | orderBy: 'date':true">

或在字段名称前添加-

<tr  ng-repeat-start="caseHistory in vm.caseHistory | orderBy: '-date'">

Answer 3

根据Angular官方教程管道或过滤器不应用于分类目的。

您可以编写自定义方法来执行此任务，如：

Main.prototype = {

sort: function(item) {
    if (this.predicate == 'date') {
        return new Date(item.date);
    }
    return item[this.predicate];
},

sortBy: function(field) {
    if (this.predicate != field) {
        this.predicate = field;
        this.reverse = false;
    } else {
        this.reverse = !this.reverse;
    }
},

reverse: false};

请参阅以下jsfiddle以供参考。

如何在Javascript / Angular {{}}中按日期排序

3 个答案: