在编辑时关闭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>

可单击表标题来设置排序顺序。在每个数据行的第二列中的单元格是可“就地”编辑的-如果你点击文本，它将被一个输入文本框替代，用户可以编辑文本。我有一个小指令来实现这一点。这一切都行得通。

问题是在编辑时出现的。假设我将其设置为按“描述”排序(第二列)。然后，如果我编辑描述(通过edit- in -place指令)，当我在输入框中键入时，排序顺序就会改变。如果我更改了前几个字符，则angular会重新排序，并且该项将不再位于光标下。它甚至连焦点都没有。我必须在列表中寻找，找出它被重新排序到哪里，然后我才能重新聚焦，并继续键入。

这有点差劲。

我想要做的是告诉angular (a)在我键入输入框时停止重新排序，或者(b)对单独的(不显示的)索引值进行排序，该索引值在编辑开始之前保留排序。但我不知道怎么做这两个。有人能给我个提示吗？

我知道这有点复杂，所以我会试着用一个柱子来说明发生了什么。

Answer 1

这就是我是如何解决这个问题的。

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

Answer 2

您可以创建自定义筛选器并仅在必要时调用它。例如，当您单击“网格标题”进行排序，或在动态向数组中添加/删除值之后，或者只需单击一个按钮(刷新网格)

需要依赖注入Angular filter和 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);
   }
 }

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