编辑时禁用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>

表头可点击以设置排序顺序。每行数据中第二列的单元格是可编辑的“就地” - 如果您单击文本，它将被替换为输入文本框，并且用户可以编辑文本。我有一个小指令来启用它。这一切都很正常。

问题出现在编辑时。假设我将其设置为按“描述”（第二列）排序。然后，如果我通过“就地编辑指令”编辑描述，当我在输入框中键入时，排序顺序会更改。如果我更改了前几个字符，那么Angular会重新排序，并且该项不再在我的光标下。甚至也没有聚焦。我必须在列表中寻找到它被重新排序到哪里，然后重新聚焦并恢复键入。

这有点糟糕。

我想要做的是告诉angular停止在我键入输入框时重新排序，或者对保留编辑开始之前排序的分离（未显示）索引值进行排序。但我不知道如何做到这两种情况。有人能给我提示吗？

我知道这有点复杂，所以我会尝试创建一个plunkr以展示正在发生的事情。

- Cheeso

---

为什么不使用一个不同的模型来处理<input>，然后在onblur时将其与较大的模型配对？ - rGil

嗯，好的，有一个想法。让我试试看。 - Cheeso

那个可行，够简单。谢谢提示！（为什么我没想到呢？） - Cheeso

呵呵。好的，知道了！你应该为其他人回答它。 - rGil

使用单独的模型的好处是可以提供保存和取消功能。 - colllin

@rGil 你应该回答它，因为你是回答它的人 ;) - colllin

Answer 1

这是我解决问题的示例代码，以下是链接：http://embed.plnkr.co/eBbjOqNly2QFKkmz9EIh/preview。

- Cheeso

---

当输入元素位于模板中时，您将如何对“edit-in-place-ok”指令应用验证？ - Thibs

以上分享的链接无法访问，我找不到答案。 - Charan Ghate

Plunker仍然无法正常工作。在索引0的编辑框中输入仍会触发排序。 - user1732364

Answer 2

您可以创建自定义过滤器，并在必要时调用它。例如，当您单击“网格标题”以进行排序或在动态添加/删除数组值后，或者仅单击按钮（刷新网格）时。

您需要依赖注入Angular的过滤器和排序过滤器

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>

- Mahesh