如何將Angular和UI-Sortable與沒有笨拙的間距的表單元格一起應用？

Question

我想要一個可使用Angular UI-Sortable按列排序的表。 當表中有多行時，空格會變得混亂。 我認為這是因為拖動的單元格和占位符占用了空間，即使拖動的單元格是絕對定位的。

我的桌子看起來像這樣：

<table>
    <thead>
      <tr ui-sortable="{'ui-floating': true, axis: 'x'}" ng-model="list">
        <th ng-repeat="item in list">
          {{item.text}}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td ng-repeat="item in list">
          {{item.text}}
        </td>
      </tr>
    </tbody>
  </table>

我的控制器看起來像這樣：

var myapp = angular.module('sortableApp', ['ui.sortable']);

myapp.controller('sortableController', function($scope) {
  var tmpList = [];

  for (var i = 1; i <= 6; i++) {
    tmpList.push({
      text: 'Item ' + i,
      value: i
    });
  }

  $scope.list = tmpList;
});

我在codepen上也有一個例子 。 嘗試拖動第一個單元格，以查看該行的其余部分向下移動到表的末尾。

我正在運行Angular v1.4.9和angular-ui-sortable v0.14.0 。

Answer 1

我想出了一種解決方法。 通過在每行中添加一個空單元格，並在第一行中添加ng-show ，我可以在添加占位符后刪除一個單元格。 這工作得很好，但是空單元格確實會占用一些空間，並且使html不太清晰。

在此處更新了Codepen： http ：//codepen.io/anon/pen/mPZBxq