編集中にangularJSの並べ替えをオフにする

Question

私はテーブルに項目の束をリストするAngularJSアプリを持っています。このように：

<table class='unstyled tmain'> 
    <tr> 
    <td ng-click='setSort($event)'>X</td> 
    <td ng-click='setSort($event)'>Desc</td> 
    <td ng-click='setSort($event)'>created</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr ng-repeat="item in items | orderBy:itemNormalizationFunction:sortReverse"> 
    <td><input type='checkbox' ng-model='item.done' 
      ng-click='onCheckedChanged(item)'/></td> 
    <td><div edit-in-place="item.text" 
      on-save="updateItemText(value,previousValue,item)"></div></td> 
    <td><span class='foo'>{{item.created | dateFormatter}}</span></td> 
    </tr> 
</table> 

表のヘッダーをクリックすると、ソート順を設定できます。各データ行の2番目の列にあるセルは「インプレース」で編集可能です。テキストをクリックすると入力テキストボックスに置き換えられ、ユーザーはテキストを編集できます。私はそれを可能にする少しの指示を持っています。これはすべて動作します。

編集中に問題が発生します。 "description"（2列目）でソートするように設定したとします。次に、（edit-in-placeディレクティブを使用して）記述を編集すると、入力ボックスに入力するときにソート順が変わります。最初の数文字を変更すると、角が再ソートされ、アイテムはもうカーソルの下にはなくなります。それにも焦点が当てられていません。私はリストを探し直して、どこで再ソートされたのかを調べる必要があります。その後、再フォーカスして、タイピングを再開できます。

これはちょっとしたことです。

私がしたいのは、（a）入力ボックスをキー入力している間に再ソートを停止する、または（b）注文を保存する別の（表示されない）インデックス値をソートすることです編集が始まる前にしかし、私はそれらのいずれかを行う方法を知らない。誰も私にヒントを与えることができますか？

私はこれが一種複雑であることを知っていますので、何が起きているのかを示すためにplunkrを組み立てようとします。

Answer 1

これは問題をどのように解決したかを示すplunkrです。

http://embed.plnkr.co/eBbjOqNly2QFKkmz9EIh/preview

Answer 2

カスタムフィルタを作成して、必要なときだけことを呼び出すことができます。あなたは、ソートのために、または動的配列に値を追加/削除した後、「グリッド・ヘッダー」をクリックし、または単にボタン（更新グリッド）をクリックする例

あなたは注入する角度フィルタとソートフィルタ

を依存関係する必要があります

angular 
    .module('MyModule') 
    .controller('MyController', ['filterFilter', '$filter', MyContFunc]) 

    function ExpenseSubmitter(funcAngularFilter, funcAngularFilterOrderBy) { 
     oCont = this; 
     oCont.ArrayOfData = [{ 
     name: 'RackBar', 
     age: 24 
     }, { 
     name: 'BamaO', 
     age: 48 
     }]; 
     oCont.sortOnColumn = 'age'; 
     oCont.orderBy = false; 
     var SearchObj = { 
     name: 'Bama' 
     }; 

     oCont.RefreshGrid = function() { 
     oCont.ArrayOfData = funcAngularFilter(oCont.ArrayOfData, SearchObj); 
     oCont.ArrayOfData = funcAngularFilterOrderBy('orderBy')(oCont.ArrayOfData, oCont.sortOnColumn, oCont.orderBy); 
    } 
} 

とHTMLでのようなものを呼び出す：

<table> 
    <thead> 
    <tr> 
     <th ng-click="oCont.sortOnColumn = 'age'; oCont.RefreshGrid()">Age</th> 
     <th ng-click="oCont.sortOnColumn = 'name'; oCont.RefreshGrid()">Name</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="val in oCont.ArrayOfData"> 
     <td>{{val.age}}</td> 
     <td>{{val.name}}</td> 
    </tr> 
    </tbody> 
</table>