AngularJS表格编辑模式下禁止排序，仅保存新行后执行排序

我来帮你搞定这个编辑模式下表格行跳动的问题！核心思路就是加个状态开关，编辑的时候让表格暂时不排序，等保存完再恢复排序逻辑。下面是具体的修改方案：

第一步：修改JS控制器代码 #

我们需要新增状态变量来标记编辑状态，同时完善新增、保存、取消的逻辑：

// 新增状态变量：标记是否处于编辑模式
$scope.isEditing = false;
// 记录当前正在编辑的行，用于锁定编辑状态
$scope.editingRow = null;

// 添加新行逻辑
$scope.addNew = function() {
  // 创建空的新行数据
  const newRow = { data1: "", data2: "" };
  // 把新行放到列表最前面，编辑模式下保持位置不变
  $scope.main.Table.unshift(newRow);
  // 进入编辑模式，禁止排序
  $scope.isEditing = true;
  $scope.editingRow = newRow;
  console.log($scope.main.Table);
};

// 保存编辑的行
$scope.saveRow = function() {
  // 退出编辑模式，此时表格会自动恢复原有排序规则
  $scope.isEditing = false;
  $scope.editingRow = null;
};

// 取消编辑（新增行时如果为空则直接移除）
$scope.cancelEdit = function() {
  // 如果是新增的空行，直接从列表中删除
  if ($scope.editingRow.data1 === "" && $scope.editingRow.data2 === "") {
    const rowIndex = $scope.main.Table.indexOf($scope.editingRow);
    if (rowIndex !== -1) {
      $scope.main.Table.splice(rowIndex, 1);
    }
  }
  // 退出编辑模式
  $scope.isEditing = false;
  $scope.editingRow = null;
};

// 原有编辑已有行的方法（同步加入编辑状态控制）
$scope.edit = function(data) {
  $scope.selected = angular.copy(data);
  $scope.backuplist = angular.copy($scope.main.Table);
  // 进入编辑模式
  $scope.isEditing = true;
  $scope.editingRow = data;
};

第二步：修改HTML模板代码 #

主要是动态控制排序逻辑，以及编辑状态下的UI切换：

<thead>
  <tr>
    <td><input type="text" ng-model="main.search.Data1" id="myInput" placeholder="search for Data1..."/></td>
    <td><input type="text" ng-model="main.search.Data2" id="myInput" placeholder="search for Data2..."/></td>
    <th>
      <!-- 新增添加按钮 -->
      <button ng-click="addNew()" class="btn btn-sm btn-primary">Add New</button>
    </th>
  </tr>
  <tr class="table_header" style="background-color: blue;">
    <th>
      <a href="#" ng-click="orderByField='data1'; reverseSort = !reverseSort">
        Data1 
        <span ng-show="!reverseSort">^</span>
        <span ng-show="reverseSort">v</span>
      </a>
    </th>
    <th>
      <a href="#" ng-click="orderByField='data2'; reverseSort = !reverseSort">
        Data2
      </a>
    </th>
    <th>Operations</th>
  </tr>
</thead>
<tbody>
  <!-- 关键：动态切换排序规则，编辑模式下跳过排序 -->
  <tr ng-repeat="code in main.Table | filter:main.search | orderBy: (isEditing ? '' : orderByField) : reverseSort">
    <!-- 非编辑状态/非当前编辑行：显示文本 -->
    <td ng-if="!isEditing || editingRow !== code">{{code.data1}}</td>
    <td ng-if="!isEditing || editingRow !== code">{{code.data2}}</td>
    
    <!-- 编辑状态下的当前编辑行：显示输入框 -->
    <td ng-if="isEditing && editingRow === code">
      <input type="text" ng-model="code.data1" class="form-control input-sm"/>
    </td>
    <td ng-if="isEditing && editingRow === code">
      <input type="text" ng-model="code.data2" class="form-control input-sm"/>
    </td>
    
    <!-- 操作按钮：根据状态切换显示 -->
    <td>
      <button ng-if="!isEditing" ng-click="edit(code)" class="btn btn-sm btn-warning">Edit</button>
      <button ng-if="isEditing && editingRow === code" ng-click="saveRow()" class="btn btn-sm btn-success">Save</button>
      <button ng-if="isEditing && editingRow === code" ng-click="cancelEdit()" class="btn btn-sm btn-danger">Cancel</button>
    </td>
  </tr>
</tbody>

核心修改点说明 #

1. 状态变量控制排序：通过isEditing变量动态切换orderBy的规则，编辑模式下传入空字符串，AngularJS会跳过排序，保持数组原有顺序，避免新行跳动。
2. 编辑行锁定：用editingRow标记当前编辑的行，确保只有目标行显示编辑输入框，其他行正常展示。
3. 修复原代码小问题：修正了class"form-control"缺少等号、main.Table与$scope.table的笔误，移除了多余的orderBy: Predicate无效代码。

内容的提问来源于stack exchange，提问作者Coder