使用jQuery可排序來重新排列表格行干擾角度orderBy

Question

最初我在一個角度應用程序中有一個表，它將使用orderBy根據某個列中的值對其行進行排序。如果您單擊表頭，它將更改orderBy參數並使用該列中的值作爲條件來列出列表。

現在，我試圖使用jQuery讓用戶手動重新排列表中的行。但是，當它們在重新排列後單擊表格上的表格標題時，行將錯誤地排序。我假設某些東西沒有更新，但它無法看到，但我現在找不到任何明確的東西。

$('#game-table tbody').sortable({ 
    opacity: 0.5 
}); 

<table id='game-table'> 
    <thead> 
     <th> 
     <a class="sortable-link" ng-click="sortType = 'title; sortReverse = !sortReverse"> 
     Titles 
     </a> 
     </th> 
    </thead> 
    <tbody> 
     <tr class="game" ng-repeat="game in data | orderBy:sortType:sortReverse" style="cursor:move;"> 

Answer 1

jQuery和Angular的根本區別在於，jQuery在DOM上運行，而Angular在原始數據上運行。當jQuery UI Sortable更新你的表格行時（通過用戶交互），Angular對此一無所知。這打破了Angular的數據與該數據的DOM表示之間的關聯。

有一個Angular UI Sortable directive on GitHub，你可能會發現有幫助。該指令的目的是利用jQuery UI Sortable功能，同時鏡像Angular數據中的相同更改。