AngularJS实现复选框勾选/取消时动态维护选中对象数组

我来帮你搞定这个需求——当勾选表格行的复选框时把对应对象加入Checked数组，取消勾选时移除它。你当前的代码逻辑有点冗余，我们可以简化实现，直接在复选框的ng-change事件里处理添加/移除操作，逻辑会清晰很多。

修正后的JavaScript代码 #

// 初始化数据和选中数组
$scope.data = [
  { 'id': '1', 'itemName': 'mousepad', 'price': '20' },
  { 'id': '2', 'itemName': 'keyboard', 'price': '20' },
  { 'id': '3', 'itemName': 'charger', 'price': '20' }
];
$scope.Checked = []; // 用来存储选中的对象

// 处理复选框状态变化的函数
$scope.toggleSelection = function(item) {
  // 检查当前对象是否已在选中数组中
  var index = $scope.Checked.findIndex(function(selectedItem) {
    return selectedItem.id === item.id;
  });
  
  if (index === -1) {
    // 没找到，添加进去
    $scope.Checked.push(item);
  } else {
    // 找到了，移除它
    $scope.Checked.splice(index, 1);
  }
};

修正后的HTML代码 #

<table class="table m-t-30">
  <thead>
    <tr>
      <th>#</th>
      <th>ItemName</th>
      <th>ItemPrice</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="tic in data track by tic.id"> <!-- 用唯一的id做track by更可靠 -->
      <td>
        <!-- ng-model绑定到临时的选中状态对象，避免污染原数据 -->
        <input type="checkbox" 
               ng-model="selectedItems[tic.id]" 
               ng-change="toggleSelection(tic)"/>
      </td>
      <td><span>{{tic.itemName}}</span></td>
      <td><span>{{tic.price}}</span></td>
    </tr>
  </tbody>
</table>

<!-- 可选：添加这段实时查看选中数组，方便调试 -->
<div class="m-t-20">
  <h4>当前选中项：</h4>
  <pre>{{Checked | json}}</pre>
</div>

关键逻辑说明 #

• 选中数组初始化：直接在$scope上定义Checked数组，专门存储选中的对象，逻辑更清晰。
• toggleSelection函数：通过findIndex根据唯一的id判断对象是否已选中——用id做比对比直接比较整个对象更高效，也避免了对象引用导致的判断错误。
• 复选框状态绑定：用selectedItems[tic.id]单独维护每个复选框的选中状态，不会修改原数据的属性，避免数据污染。
• track by优化：把track by $index替换为track by tic.id，因为id是唯一标识，当数据顺序变化时渲染更稳定。

这样修改后，就能完美实现你要的效果：勾选时添加对象到Checked数组，取消勾选时移除，再次勾选重新添加。

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