AngularJS：orderBy OrderBy 像过滤器过滤器吗？答案

【问题标题】：AngularJS: Is the an orderByOrderBy like filterFilter?AngularJS：orderBy OrderBy 像过滤器过滤器吗？
【发布时间】：2014-06-08 21:28:44
【问题描述】：

我有一个表，我在其中使用大多数 AngularJS 教程中的 doSort() 示例按列对数据进行排序。但是，由于我用 doSort() 用完了 orderBy，我不知道如何进行默认排序。

我尝试堆叠 orderBy（就像您可以使用过滤器一样），但默认值不起作用。

这是我的桌子，但 orderBy:dueDate 被忽略了 --

<table id="tblProjects" class="tblLanding" ng-hide="projectManagerClose">
        <tr class="landing_header_row">
          <th style="width:7%;" data-ng-click="doProjSort('Priority')">Priority</th>
          <th style="width:3%;" data-ng-click="doProjSort('Task_Id')">ID</th>
          <th style="width:17%;" data-ng-click="doProjSort('Description')">Description</th>
          <th style="width:10%;" data-ng-click="doProjSort('Status')">Status</th>
          <th style="width:15%;" data-ng-click="doProjSort('Division')">Division</th>
          <th style="width:12%;" data-ng-click="doProjSort('Requestor')">Requestor</th>
          <th style="width:12%;" data-ng-click="doProjSort('ProjMan')">Project Manager</th>
          <th style="width:12%;" data-ng-click="doProjSort('AssignedTo')">Assigned To</th>
          <th style="width:12%;" data-ng-click="doProjSort('DueDate')">Due Date</th>
        </tr>
        <tr class="landing_data_row" data-ng-repeat="project in open_projects | 
                filter: pmProjectsFilter | filter: statusFilter | 
                orderBy: DueDate | orderBy:sortProjBy:reverse">
            <td><div class='sprite indic-{{project.Priority}} centered'></div></td>
            <td style="text-align:center;">{{project.Task_Id}}</td>
            <td><a href="#">{{project.Description}}</a></td>
            <td>{{project.Status}}</td>
            <td>{{project.Division}}</td>
            <td>{{project.Requestor}}</td>
            <td>{{project.ProjMan}}</td>
            <td>{{project.AssignedTo}}</td>
            <td>{{project.DueDate | date : 'MMM dd, yyyy'}}</td>
        </tr>
    </table>

【问题讨论】：

看下面的问题[stackoverflow.com/questions/17037524/…
该数组适用于其中两个字段，但在我使用 | 时会隐藏所有记录orderBy: 'DueDate', 'sortProjBy:reverse' |
我会考虑使用您的排序函数 (doProjSort) 操作的 sortString 类型“模型”。然后使用 sortString 作为 orderBy 的参数。字符串应该类似于“+column1, -column2”。

标签： angularjs

【解决方案1】：

'DueDate' 周围缺少单引号。这是必要的，因为它是一个文字字符串，而不是像sortProjBy 这样的变量。

    <tr class="landing_data_row" data-ng-repeat="project in open_projects | 
            orderBy:'DueDate' | orderBy:sortProjBy:reverse">

这实际上确实最初按 DueDate 对数据进行排序。然后，当给sortProjBy 赋值时，第二个orderBy 将覆盖第一个orderBy。这是一个演示此行为的 plunker：http://plnkr.co/edit/GNN7m90e3PYfTmxoNdbn?p=preview

如果你想实现对多列的排序（总是按DueDate排序，然后按点击的列），使用array syntax：

    <tr class="landing_data_row" data-ng-repeat="project in open_projects | 
            orderBy:['DueDate',sortProjBy]">

这里是数组语法的演示：http://plnkr.co/edit/FQxPNmwVNMd4lmn9mPSZ?p=preview

【讨论】：