AngularJS：ng-repeat内ng-show失效，选中状态无法更新

我来帮你捋捋这个问题哈！你现在的情况是点击颜色块能正常设置背景色，但勾选图标死活不出来，核心问题其实出在控制器里的pickColor函数上，咱们一步步拆解：

先看你代码里的两个坑 #

1. 循环边界错误导致数组越界 #

你写的循环条件是for(var i = 0; i<=this.colorBoxes.length; i++)，数组的索引是从0到length-1的，当i等于colorBoxes.length时，this.colorBoxes[i]就是undefined，这时候给它设置isSelected = false会直接报错，Angular的变更检测循环可能因为这个错误中断，自然没法更新视图。

2. 选中状态赋值逻辑错误 #

你的pickColor函数第一个参数标注为array: any，但实际上你在视图里传的是s——也就是单个colorBoxes对象，不是数组！所以array[index].isSelected = true这行代码完全错误，相当于你给一个不存在的属性赋值，根本没修改到目标对象的isSelected值，视图自然感知不到变化。

修复方案 #

方案一：直接操作选中对象（更简洁） #

先修改控制器里的pickColor函数，不用传索引，直接操作点击的颜色对象：

pickColor(selectedItem: colorBoxes) {
  // 把所有颜色块设为未选中
  this.colorBoxes.forEach(item => {
    item.isSelected = false;
  });
  // 标记当前点击的为选中
  selectedItem.isSelected = true;
}

然后修改视图里的ng-click，只传当前对象就行，同时简化ng-show的判断：

<div ng-repeat="s in vm.colorBoxes track by $index">
  <div class="pointer" 
       ng-click="w.backgroundColor = s.color; vm.pickColor(s)" 
       ng-style='{"background-color": s.color}'>
    <i ng-show="s.isSelected" class="fa fa-check fa-1x checkOnSelectedLegend"></i>
  </div>
</div>

方案二：通过索引操作数组（如果你习惯用索引） #

如果还是想用索引处理，修改pickColor函数的循环和赋值逻辑：

pickColor(index: number) {
  // 循环边界改成 < length，避免越界
  for(let i = 0; i < this.colorBoxes.length; i++) {
    this.colorBoxes[i].isSelected = false;
  }
  // 通过索引找到对应项设置选中
  this.colorBoxes[index].isSelected = true;
}

视图里的ng-click改成传索引：

ng-click="w.backgroundColor = s.color; vm.pickColor($index)"

ng-show可以简化为ng-show="vm.colorBoxes[$index].isSelected"，也可以保留你的isColorSelected函数（不过这个函数其实有点多余）。

为什么这样能解决？ #

修复循环边界后不会再出现报错，Angular的变更检测能正常运行；同时选中状态的赋值逻辑正确了，isSelected的变化会被Angular检测到，ng-show就能根据这个值正确显示/隐藏勾选图标了。

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