sorting in angularJS while editing

I have an AngularJS app that lists a bunch of items in a table. Like this:

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

The table headers are clickable to set the sort order. The cell in the 2nd column in each data row is editable "in place" - if you click on the text it gets replaced with an input textbox, and the user can edit the text. I have a little directive enabling that. This all works.

The problem comes in while editing. Suppose I have it set to sort by "description" (the 2nd column). Then if I edit the description (via the edit-in-place directive), as I am typing in the input box, the sort order changes. If I change the first few characters, then angular re-sorts and the item is no longer under my cursor. Nor is it even focused. I have to go hunting through the list to find out where it got re-sorted to, then I can re-focus, and resume typing.

This is kinda lame.

What I'd like to do is tell angular to (a) stop re-sorting while I am keying in the input box, or (b) sort on a separate (not-displayed) index value that preserves the ordering before the edit began. But I don't know how to do either of those. Can anyone give me a hint?

I know this is sort of complicated so I'll try to put together a plunkr to show what's happening.

---

This is the plunkr that shows how I solved the problem.

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

---

You can create custom filter and call that only when necessary. Example when you click on 'Grid header' for sorting or after dynamically adding/removing values to array, or simply click of a button(Refresh Grid)

You need to dependency Inject Angular filter and sort filter

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

and call in HTML something like:

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

链接地址: http://www.djcxy.com/p/14662.html

上一篇: 保持左列可见并可滚动

下一篇: 在编辑时在angularJS中进行排序