维护排序的插入顺序 Table

Question

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

问题是添加到我的排序 table 中的具有空字段的新行将始终出现在 table 的顶部。

这是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);
  }
}

所以如果我的 table 看起来像这样，排序后：

[Before sort]       [After sort]

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

并且我在 D 的上方和下方插入了一个新行，我的 table 现在看起来像这样：

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

预期结果：

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

为什么新行没有直接出现在我选择添加的行的上方或下方？

Answer 1

这是一个非常基本的指令，可以完成您在评论中提到的最少工作。它仅在首次加载时对数据进行一次排序，并且反应不是很活跃，但它可以让您切换并且应该很容易添加手表等以获得更多功能。

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>

维护排序的插入顺序 Table

Maintain Insertion Order in a Sorted Table

javascript

html

angularjs

angularjs-ng-repeat