在排序表中维护插入顺序答案

【问题标题】：Maintain Insertion Order in a Sorted Table在排序表中维护插入顺序
【发布时间】：2020-07-31 16:28:55
【问题描述】：

我有一个表格，允许我在另一行上方或下方插入新行。表格可以按列排序。

问题是添加到我的排序表中的带有空字段的新行将始终显示在表的顶部。

这是 HTML：

<table>
    <th ng-repeat= "header in headers">
        <a href="#" ng-click="orderByField='name'; reverseSort = !reverseSort"> Name </a>
    </th>
    <tr ng-repeat "result in results | orderBy:orderByField:reverseSort">
        <td> 
          <span>{{result}}</span>
          <md-icon ng-click="addRow(result, true)"></md-icon>
          <md-icon ng-click="addRow(result, false)"></md-icon>
        </td>
    </tr>
</table>

这是我的控制器：

function addRow(selectedRow, isAbove) {
  var selectedPos = $scope.results.indexOf(selectedRow);
  var newRow = "";

  if (isAbove) {
    $scope.results.splice(selectedPos, 0, newRow);
  } else {
    $scope.results.splice(selectedPos + 1, 0, newRow);
  }
}

所以如果我的表格是这样的，排序后：

[Before sort]       [After sort]

Name                Name
----                ----
D                   A
----                ----
C                   B
----                ----
B                   C
----                ----
A                   D
----                ----

我在 D 上方和下方插入一个新行，我的表格现在看起来像这样：

Name 
-----
""
-----
""
-----
A
-----
B
-----
C
-----
D
-----

预期结果：

Name
----
A
----
B
----
C
----
""
----
D
----
""
----

为什么新行没有直接显示在我选择从中添加的行的上方或下方？

【问题讨论】：

除非我理解错了，我想你会想要分享用于添加行的代码。
@brian 嗨，我已经编辑了我的问题以包含用于添加行的代码。
我对堆栈不是很熟悉，但如果我不得不猜测一下，我会怀疑 selectedPos 没有得到您期望的值。查看 results.indexOf() 行。
因为正在对行进行排序，并且 "" 在其他项目之前。
@Dan 有没有解决方案不对新添加的行进行排序

标签： javascript html angularjs angularjs-ng-repeat

【解决方案1】：

这是一个非常基本的指令，可以满足您在 cmets 中提到的最低要求。它仅在首次加载时对数据进行一次排序，并且反应性不是很强，但它可以让您切换并且应该很容易添加手表等以获得更多功能。

var app = angular.module('myApp',[]);
app.controller('ctrlMain', function($scope, filterFilter){
  $scope.reverse = false;  // <-- `reverse` boolean
  // Data
  $scope.results = [
    { name: "b" },
    { name: "g" },
    { name: "x" },
    { name: "a" },
    { name: "p" },
  ];
});
app.directive('orderer', function($filter) {
  return {
    scope: {
      data: '=orderer',
      reverse: '='
    },
    link: function(scope,element,attrs){
      scope.ordered = $filter('orderBy')(scope.data, 'name', scope.reverse);
      scope.formatted = [];
      
      scope.addRow = function(i, isAbove) {
        let index = i + !isAbove
        if (scope.reverse) {
          index = scope.ordered.length - index;
        }
        scope.ordered.splice(index, 0, { name: '*' });
      }
      scope.setFormatted = function(isReversed) {
      	scope.formatted = scope.reverse ? scope.ordered.slice().reverse() : scope.ordered;
      };
      scope.$watch('reverse', function(n, o){
        scope.setFormatted();
      });
      scope.$watch('ordered', function(n, o){
        scope.setFormatted();
      }, true);
    },
    template: `
      <tr ng-repeat="item in formatted">
        <td>{{ item.name }}</td>
        <td><button ng-click="addRow($index, true)">O</button</td>
        <td><button ng-click="addRow($index, false)">U</button</td>
      </tr>
    `
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="ctrlMain">
    <button ng-click="reverse = !reverse">toggle</button>
    <table>
      <tr><th>Header</th></tr>
      <tbody orderer="results" reverse="reverse"></tbody>
    </table>
  </div>
</body>

【讨论】：