ng 单击更新模型不重置 ng src

Question

我有一个ng重复，它将显示四个图像。单击其中任何一个时，我必须更改特定图像并将其他图像重置为以前的图像。我的 angularJs 代码是这样的

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

单击后，它将更改特定的图像，但不会重置上一个图像。我做错了什么？

Answer 1

你做得比必要的更难。为什么需要两个变量来记住选择了哪个类别？为什么将selectedNo设置为 category.RunningNumber ，然后将其与 $index 进行比较.如果它应该是索引，则将其设置为索引。如果它应该是类别的运行编号，则将其与运行编号进行比较。

此外，您正在修改作用域的变量，但 ng-repeat 有自己的作用域。因此，每个迭代都有自己的 selectedCategory 和 selectedNo。

因此，在控制器中创建一个对象：

$scope.model = {
  selectedCategory: null
};

然后你所需要的只是

<div ng-repeat="category in categoryList">
    <img ng-click="model.selectedCategory = category" 
         ng-src="{{ model.selectedCategory == category ? category.HoverImageName : category.CategoryImage }}" />
</div>

或委托给函数：

$scope.selectedCategory = null;
$scope.selectCategory = function(category) {
  $scope.selectedCategory = category;
};
<div ng-repeat="category in categoryList">
    <img ng-click="selectCategory(category)" 
         ng-src="{{ selectedCategory == category ? category.HoverImageName : category.CategoryImage }}" />
</div>