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>

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

编辑时出现问题。假设我将它设置为按“description”排序（第2列）。然后，如果我编辑描述（通过编辑就地指令），当我在输入框中键入时，排序顺序会更改。如果我更改前几个字符，则角度重新排序，项目不再在我的光标下。它甚至都没有集中注意力。我必须在列表中搜索以找出重新排序的位置，然后我可以重新聚焦，并继续打字。

这有点蹩脚。

我想做的是告诉angular（a）在输入框中键入时停止重新排序，或者（b）对保留排序之前的单独（未显示）索引值进行排序编辑开始了。但我不知道如何做其中任何一个。任何人都可以给我一个提示吗？

我知道这有点复杂，所以我会尝试整理一个傻瓜来展示正在发生的事情。

Answer 1

这是说明我如何解决问题的傻瓜。

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

Answer 2

您可以创建自定义过滤器，并仅在必要时调用它。点击＆＃39;网格标题＆＃39;用于排序或在向数组动态添加/删除值之后，或者只需单击按钮（刷新网格）

您需要依赖注入角度过滤器和排序过滤器

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>

在编辑时关闭angularJS中的重新排序

2 个答案: