使用Array.splice()移除数组元素时误删多项的问题修复咨询

嘿，我看你遇到的这个问题其实是两个小细节没处理好，咱们来一步步修正：

问题根源分析 #

1. splice()方法使用错误：你当前写的users.splice(index)会从指定索引位置开始，删除数组中从该位置到末尾的所有元素。所以当取消第一个选中的员工时，索引是0，自然就把整个数组清空了。正确的用法需要指定第二个参数——要删除的元素数量。
2. 复选框状态共享问题：所有复选框都绑定到同一个checked变量，这会导致一个复选框的状态变化时，其他所有复选框的状态都会跟着改变，这显然不符合需求。

修改后的完整代码 #

HTML部分 #

<div ng-app="myApp"> 
  <div ng-controller="MainCtrl"> 
    <table> 
      <tr ng-repeat="user in users"> 
        <td><input type="checkbox" ng-model="user.isChecked" ng-change="addremoveuser(user.isChecked, user.ID)"></td> 
        <td>{{user.Title}}</td> 
        <td>{{user.FirstName}}</td> 
        <td>{{user.LastName}}</td> 
      </tr> 
    </table>
    <!-- 可选：在视图中显示选中的ID，方便调试 -->
    <p>选中的员工ID：{{selectedUserIds}}</p>
  </div> 
</div>

JavaScript部分 #

var app = angular.module('myApp', ['ngSanitize']); 
app.controller('MainCtrl', function($scope, $http, $q){ 
  // 模拟用户数据（实际项目中可从接口获取）
  $scope.users = [
    {ID: 1, Title: "Mr.", FirstName: "John", LastName: "Doe"},
    {ID: 2, Title: "Ms.", FirstName: "Jane", LastName: "Smith"},
    {ID: 3, Title: "Dr.", FirstName: "Bob", LastName: "Brown"}
  ];
  
  // 存储选中的员工ID数组，放到$scope上方便调试和后续使用
  $scope.selectedUserIds = []; 

  $scope.addremoveuser = function (checked, id) { 
    if (checked) { 
      console.log("用户已选中", id); 
      $scope.selectedUserIds.push(id); 
      console.log("当前选中列表", $scope.selectedUserIds); 
    } else { 
      console.log("用户已取消选中", id); 
      var index = $scope.selectedUserIds.indexOf(id); 
      // 先判断ID是否存在于数组中，避免无效操作导致异常
      if (index !== -1) {
        // 第二个参数传入1，表示只删除索引位置的1个元素
        $scope.selectedUserIds.splice(index, 1); 
      }
      console.log("当前选中列表", $scope.selectedUserIds); 
    } 
  }; 
});

修改说明 #

• 给每个用户对象添加独立的isChecked属性，确保每个复选框的状态互不干扰
• 修正splice(index, 1)的用法，精准删除指定位置的单个元素
• 将选中ID数组和用户数据都挂载到$scope上，便于在视图中查看状态，也符合AngularJS的数据绑定规范
• 添加了index !== -1的判断，防止当ID不存在于数组中时执行splice引发异常

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