How-To：複数の列「Always on Top」レコードを維持しながらAngularJSで並べ替えますか？

Question

私はソートしているシンプルなテーブルを持っていて、2つのカラム（日付または '添付ファイル'）のいずれかでソートすることができますが、テーブルの上部に特定のレコードを保持したいレコードは「固定」されています）、その後に行をソートするだけです。

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> 

角度Sortメソッド

$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リピートからソート順を削除：

<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; 
     };