7

テーブルに一連のアイテムをリストする 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 列目のセルは「その場で」編集可能です。テキストをクリックすると入力テキスト ボックスに置き換えられ、ユーザーはテキストを編集できます。それを可能にする小さな指示があります。これはすべて機能します。

編集中に問題が発生します。「説明」（2列目）でソートするように設定したとします。次に、入力ボックスに入力しているときに (edit-in-place ディレクティブを使用して) 説明を編集すると、並べ替え順序が変更されます。最初の数文字を変更すると、角度が再ソートされ、アイテムがカーソルの下になくなります。また、集中していません。リストを調べて、再ソートされた場所を見つける必要があります。その後、再び焦点を合わせて、入力を再開できます。

これはちょっと不自由です。

私がやりたいことは、(a) 入力ボックスにキーを入力している間に再ソートを停止するか、(b) 編集が始まる前の順序を保持する別の (表示されていない) インデックス値でソートするように angular に指示することです. しかし、私はそれらのいずれかを行う方法がわかりません。誰でも私にヒントを与えることができますか？

これはちょっと複雑なので、何が起こっているのかを示すために plunkr をまとめてみます。

4

2 に答える 2

3

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

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

于 2013-07-27T03:57:30.337 に答える
0

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

Inject Angularフィルターとsort フィルターに依存する必要があります。

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>
于 2015-01-29T07:50:25.090 に答える