AngularJS问题：如何将选中的复选框项绑定至空数组

核心问题分析 #

你的代码存在三个关键问题导致无法正常工作：

1. ng-model绑定错误
   复选框的ng-model被绑定到数组selectedImages，但复选框要求绑定布尔值（表示选中/未选中状态），而非数组。所有复选框共享同一个数组模型会导致状态混乱。

2. 未处理取消选中逻辑
   当前updateSelection函数只会将URI追加到数组，无论复选框是选中还是取消选中，这会导致重复添加及数组状态与实际选中情况不符。

3. 复选框状态与数组不同步
   初始时或数组变化时，复选框无法自动反映对应URI是否已被选中。

修复方案一：基于数组的状态同步 #

这种方案无需修改原encounter对象，直接通过数组维护选中状态：

控制器代码调整

$scope.selectedImages = [];

$scope.updateSelection = function(item) {
  var index = $scope.selectedImages.indexOf(item);
  if (index > -1) {
    // 已存在则移除
    $scope.selectedImages.splice(index, 1);
  } else {
    // 不存在则添加
    $scope.selectedImages.push(item);
  }
};

HTML代码调整

将ng-model替换为ng-checked来同步复选框状态，保留ng-change触发更新：

<div ng-repeat="encounter in encounters.encounters" style="display: flex; flex-direction: row;">
     <img class="imgGallerySmall" alt="No capture taken" ng-src="{{encounter.secureImageUri}}" />
     <div>
          <p> 
              <input type="checkbox" 
                     ng-checked="selectedImages.indexOf(encounter.secureImageUri) > -1" 
                     ng-change="updateSelection(encounter.secureImageUri)"/>
          </p>
     </div>
</div>

修复方案二：基于对象的高效状态跟踪 #

如果图片数量较多，使用对象存储选中状态（O(1)查找效率）会更高效：

控制器代码调整

$scope.selectedItems = {}; // 存储选中状态：{ uri: boolean }
$scope.selectedImages = [];

$scope.updateSelection = function(item, isSelected) {
  if (isSelected) {
    $scope.selectedImages.push(item);
  } else {
    var index = $scope.selectedImages.indexOf(item);
    if (index > -1) {
      $scope.selectedImages.splice(index, 1);
    }
  }
};

HTML代码调整

使用对象属性作为ng-model，实现双向绑定：

<div ng-repeat="encounter in encounters.encounters" style="display: flex; flex-direction: row;">
     <img class="imgGallerySmall" alt="No capture taken" ng-src="{{encounter.secureImageUri}}" />
     <div>
          <p> 
              <input type="checkbox" 
                     ng-model="selectedItems[encounter.secureImageUri]" 
                     ng-change="updateSelection(encounter.secureImageUri, selectedItems[encounter.secureImageUri])"/>
          </p>
     </div>
</div>

额外说明 #

• 方案一适合少量图片的场景，实现简单；方案二更适合大量图片的场景，性能更优。
• 若需要初始选中某些图片，只需在控制器初始化时将对应URI添加到selectedImages数组（方案一），或设置selectedItems[uri] = true（方案二）即可。

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