点击更新模型不重置ng src

时间:2018-01-20 13:57:35

标签: angularjs

我有一个重复,它将显示四个图像。 单击其中任何一个,我必须更改特定图像的图像,并将其他图像重置为其上一个图像。我的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>
单击它后,它将更改特定的一个,但它不会重置上一个图像。 我做错了什么?

1 个答案:

答案 0 :(得分:2)

你变得比必要的更难。为什么需要两个变量来记住选择哪个类别?为什么要将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>