AngularJS中ng-click更新模型后ng-src未重置问题排查咨询

我来帮你拆解下当前代码的问题，以及给出可行的修复方案：

核心问题 #

你的代码目前有两个关键问题导致无法重置之前的图片：

1. ng-repeat的子作用域陷阱 #

AngularJS里的ng-repeat会为每个重复项创建独立的子作用域。当你在ng-click里直接赋值selectedCategory = category.Category_Id这类基本类型变量时，实际上是在当前子作用域中创建了一个新的变量副本，而不是更新父控制器作用域中的变量。这就导致其他图片所在的子作用域根本感知不到选中状态的变化，所以之前的图片会一直保持hover状态。

2. 选中判断逻辑不够可靠 #

你用$index == selectedNo来决定是否显示hover图，这个逻辑依赖于category.RunningNumber和ng-repeat的$index完全一一对应。但如果RunningNumber不是从0开始的连续值，或者后续categoryList的顺序发生变化，这个判断就会失效，无法正确切换图片状态。

修复方案（推荐写法） #

第一步：在控制器中用对象包装选中状态 #

在你的AngularJS控制器里，定义一个对象来存储选中的分类ID，避免子作用域的变量覆盖问题：

// 控制器代码示例
app.controller('YourController', function($scope) {
  // 假设你的categoryList已经在这里定义
  $scope.categoryList = [...];
  
  // 用对象包装选中状态，避免作用域问题
  $scope.selected = {
    categoryId: null
  };
});

第二步：更新模板代码 #

修改ng-click和图片显示的判断逻辑，用唯一的Category_Id来判断当前项是否被选中：

<div class='col-lg-3 col-md-3 col-xs-6 col-sm-6 noPaddingLeftRight' ng-repeat="category in categoryList">
  <img 
    ng-click="selected.categoryId = category.Category_Id"
    ng-src="{{category.Category_Id == selected.categoryId ? category.HoverImageName : category.CategoryImage}}" 
    alt='home' 
    style='align-content: center; margin-top: 10px;' 
  />
</div>

为什么这个方案有效？ #

1. 解决作用域问题：selected是一个引用类型的对象，ng-repeat的子作用域会继承父作用域的对象引用。点击时修改的是对象的categoryId属性，所有子作用域都能共享这个更新后的状态，所以其他图片会自动重置为原始图。
2. 更可靠的判断逻辑：用Category_Id这个唯一标识来判断选中状态，不管列表顺序如何变化，只要选中的ID和当前项匹配，就显示hover图，逻辑更稳定，也更符合业务逻辑（分类ID本来就是唯一的）。

备选方案（快速修复，不推荐长期使用） #

如果你不想修改控制器代码，也可以直接在模板中用$parent访问父作用域的变量，但这种方式不够优雅，后期维护起来容易出问题：

<div class='col-lg-3 col-md-3 col-xs-6 col-sm-6 noPaddingLeftRight' ng-repeat="category in categoryList">
  <img 
    ng-click="$parent.selectedCategory = category.Category_Id"
    ng-src="{{category.Category_Id == $parent.selectedCategory ? category.HoverImageName : category.CategoryImage}}" 
    alt='home' 
    style='align-content: center; margin-top: 10px;' 
  />
</div>

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