在编辑时在angularJS中进行排序

我有一个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列中的单元格可以“就地”编辑 - 如果单击文本，它将被输入文本框替换，用户可以编辑文本。 我有一个小指令来实现这一点。 这一切都有效。

编辑时出现问题。 假设我已将它设置为按“description”（第二列）进行排序。 然后，如果我编辑描述（通过就地编辑指令），因为我在输入框中键入，排序顺序会发生变化。 如果我更改了前几个字符，然后进行角度重新排序并且该项目不再位于我的光标下。 它甚至没有关注。 我必须在列表中找出重新排序的位置，然后我可以重新聚焦，然后重新打字。

这有点跛脚。

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

我知道这有点复杂，所以我会试着拼凑一个游戏来展示正在发生的事情。

---

这是显示我如何解决问题的方法。

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

---

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

您需要依赖Inject 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>

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

上一篇: sorting in angularJS while editing

下一篇: Median of Medians