Question

我有一个简单的表，我正在进行排序，我希望能够按两列中的一列（日期或'附件'）进行排序，但保留特定记录在表的顶部（记录为'固定'）并在此之后对行进行排序。

Html代码

<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th style="width: 50px" class="centered">
                <div class="icon-refresh clickable" ng-click="loadNotes()"></div>
            </th>
            <th class="clickable colored_text" style="width: 50px"  ng-click="sort('LastModified')">Last Modified</th>
            <th class="clickable colored_text" style="width: 50px"  ng-click="sort('HasAttachment')">Attachment</th>
            <th>Note</th>
        </tr>
    </thead>
    <tr ng-show="notesLoaded == true && notes.length == 0">
        <td colspan="3">No notes found.</td>
    </tr>
    <tr ng-repeat="note in notes | filter: myFilterNotes | orderBy: noteSortOrder: noteSortDirection | startAt: (currentPage-1)*pageSize | limitTo :pageSize " ng-class="{'pinned': note.Pinned}">
        <td class="span1"><button class="btn btn-inverse" ng-click="editNote(note.Id)" ng-show="(note.CreatedBy == history.currentUserId && note.TypeId === 0) || (history.canEditNotes && note.TypeId === 0)">Edit</button></td>
        <td>{{note.LastModified | date:'MM/dd/yyyy h:mm a'}}</td>
        <td  class="centered">
            <span ng-if="note.HasAttachment">
                <a href ng-click="downloadAttachment(note)"><i class="icon-paper-clip icon-1point5x" title="{{note.NoteFileName}}"></i></a>
            </span>
        </td>
        <td class="forceWordWrap">
            <div class="span11">
                <span ng-show="note.TypeId === 1">(Lead Note) </span>
                <span ng-if="note.IsValidHtml" ng-bind-html="note.Note"></span>
                <span ng-if="!note.IsValidHtml" ng-repeat="line in (note.Note | newlines) track by $index">
                    {{line}}<br/>
                </span>
                <span style="color: #bbb; font-size: 85%; font-weight: normal">
                    <p style="margin: 0;">-- created by {{(note.CreatedByName.length > 0) ? note.CreatedByName : "Unknown"}} on {{::note.CreatedDate | date:'MM/dd/yyyy h:mm a' }}</p>
                    <span ng-show="note.LastModifiedBy.length > 0">
                        <p style="margin: 0;">-- last modified by {{::note.LastModifiedBy}}</p>
                    </span>
                </span>
            </div>
            <span class="span1" ng-show="note.Pinned" style="color: rgb(255, 0, 0);">
                <i class="icon-pushpin icon-1point5x"></i>
            </span>
        </td>
    </tr>
</table>

角度排序方法

    $scope.noteSortDirection = true;
    $scope.noteSortOrder = ["Pinned", "HasAttachment"];
    $scope.sort = function (column) {
        $scope.noteSortDirection = !$scope.noteSortDirection;

        var sortColumnWithDirection = $scope.noteSortDirection !== true
                                 ? "-" + column
                                 : column;

        var newSortOrder = ["Pinned", sortColumnWithDirection];

        $scope.noteSortOrder = newSortOrder;
    };

初始的多列排序工作正常，但是当我点击其中一个标题时，它会以某些不稳定的方式对“固定”的内容进行排序。（下面的截图）

这很棒！

这不是那么多。它就像它完全符合我的要求，然后颠倒整个事物！（GRR）

理想情况下，这就是我想要的！

Answer 1

解决了它。我从ng-repeat中删除了排序顺序：

<tr ng-repeat="note in notes | filter: myFilterNotes | orderBy: noteSortOrder: true | startAt: (currentPage-1)*pageSize | limitTo :pageSize " ng-class="{'pinned': note.Pinned}">

并更新了自定义排序方法，以便在合适的时间处理排序顺序：

        $scope.sort = function (column) {
            var sortDir = $scope.noteSortDirection;
            var revSortDir = !sortDir;

            var sortColumnWithDirection = revSortDir !== true
                                              ? "-" + column
                                              : column;

            var newSortOrder = ["Pinned", sortColumnWithDirection];

            $scope.noteSortDirection = !$scope.noteSortDirection;

            $scope.noteSortOrder = newSortOrder;
        };

方法：AngularJS中的多列排序，同时保持“始终在最前面”记录？

1 个答案: