AngularJS中如何捕获表格行单选按钮ID实现记录删除？

嘿，作为AngularJS新手遇到这个问题太正常了，我来帮你捋清楚问题出在哪，以及怎么快速修复：

你当前代码的两个核心问题 #

1. ng-click里的插值语法错误：AngularJS的指令（比如ng-click）内部直接用scope变量就行，完全不需要{{}}插值。你写的deleteEmployee({{usr.empId}})会把usr.empId渲染成字符串，不仅传不了正确的变量值，还会引发语法错误。
2. 单选按钮未绑定选中状态：现在的单选按钮只设置了value，但没和控制器的scope变量绑定，你的代码根本不知道哪个按钮被选中了，自然拿不到要删除的ID。

修复步骤和完整代码 #

第一步：修改HTML部分，绑定单选按钮选中状态并修正ng-click

<div>
  <button ng-click="deleteEmployee(selectedEmpId)">Remove Employee</button>
</div>
<table border="1">
  <thead>
    <tr>
      <th></th>
      <th>Emp ID</th>
      <th>Name</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody ng-repeat="usr in users">
    <tr>
      <!-- 用ng-model绑定选中的ID，ng-value绑定用户ID -->
      <td><input type="radio" name="empId" ng-model="$parent.selectedEmpId" ng-value="usr.empId"></td>
      <td>{{usr.empId}}</td>
      <td>{{usr.name}}</td>
      <td>{{usr.location}}</td>
    </tr>
  </tbody>
</table>

这里的关键点：

• ng-model="$parent.selectedEmpId"：因为ng-repeat会创建子scope，用$parent能直接绑定到控制器的父scope变量上；你也可以提前在控制器里声明selectedEmpId，同样能避免子scope的问题。
• ng-value="usr.empId"替代value="{{usr.empId}}"：这是AngularJS的规范写法，能保证值的类型正确（比如数字不会被转成字符串）。
• ng-click直接传selectedEmpId：这是我们绑定的选中ID变量，完全不需要插值。

第二步：调整AngularJS控制器代码

// 先初始化选中的ID变量
$scope.selectedEmpId = null;

$scope.deleteEmployee = function (id) {
  // 先判断是否选中了员工，避免无效请求
  if (!id) {
    $scope.errorMessage = '请先选择要删除的员工！';
    return;
  }
  
  EmployeeService.deleteUser(id)
    .then(function success(response){
      $scope.message = 'User deleted!';
      // 这里建议重新获取用户列表，更新界面（示例）
      // EmployeeService.getUsers().then(res => $scope.users = res.data);
      $scope.selectedEmpId = null; // 删除后清空选中状态，提升体验
      $scope.errorMessage='';
    }, function error(response){
      $scope.errorMessage = 'Error deleting user!';
      $scope.message='';
    })
}

额外加了选中判断，避免用户没选员工就点击删除的情况；删除成功后清空选中状态，让界面更友好。

为什么这样改？ #

通过ng-model绑定单选按钮的选中状态，控制器能实时拿到当前选中的员工ID，这正是AngularJS数据双向绑定的核心用法；移除ng-click里的插值，符合AngularJS指令的使用规范，彻底解决语法和变量类型的问题。

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