AngularJS实现双击表格<tr>行触发编辑模式的方法

看你现在的代码应该是用了全局的状态来控制编辑模式，这样双击一行会让所有行都进入编辑状态对吧？咱们改成每行独立控制编辑状态就可以解决这个问题，具体实现步骤如下：

1. 给每行数据添加独立的编辑标识 #

首先在控制器里，给selectedFacture中的每个用户对象添加一个editMode属性，默认设为false（初始为非编辑状态）：

// 假设你已经获取到了用户数据
$scope.selectedFacture = [
  {name: 'John', lastName: 'Doe', selected: false},
  {name: 'Jane', lastName: 'Smith', selected: false}
];

// 给每个用户添加独立的编辑状态属性
$scope.selectedFacture.forEach(user => {
  user.editMode = false;
});

2. 修改表格结构，绑定双击事件和状态切换 #

把原来的全局状态换成每行的user.editMode，同时给普通状态的行添加ng-dblclick事件来切换编辑状态：

<table>
  <tbody>
    <!-- 非编辑状态行：双击进入编辑模式 -->
    <tr ng-repeat="user in selectedFacture" ng-if="!user.editMode" ng-dblclick="user.editMode = true">
      <td><input type="checkbox" ng-model="user.selected" /></td>
      <td data-title="Name">{{ user.name }}</td>
      <td data-title="Last Name">{{ user.lastName }}</td>
    </tr>
    <!-- 编辑状态行：显示输入框，支持保存/取消 -->
    <tr ng-repeat="user in selectedFacture" ng-if="user.editMode">
      <td><input type="checkbox" ng-model="user.selected" /></td>
      <td data-title="Name"><input type="text" ng-model="user.name" class="form-control" /></td>
      <td data-title="Last Name"><input type="text" ng-model="user.lastName" class="form-control" /></td>
      <td>
        <button ng-click="saveUser(user); user.editMode = false" class="btn btn-sm btn-primary">保存</button>
        <button ng-click="user.editMode = false" class="btn btn-sm btn-default">取消</button>
      </td>
    </tr>
  </tbody>
</table>

3. 可选：添加保存逻辑（控制器中） #

如果需要将修改后的数据提交到后端，可以在控制器里实现保存方法：

$scope.saveUser = function(user) {
  // 这里写你的保存逻辑，比如调用API更新用户数据
  console.log('正在保存用户:', user);
  // 保存成功后可以添加提示，比如 alert('数据保存成功！')
};

小提示 #

原来代码里的<tbody ng-model="facture_details">是无效的，因为ng-model只能用于表单控件，直接去掉就好啦。用每行独立的editMode属性，能精准控制某一行的编辑状态，完全符合“双击特定行编辑”的需求。

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