選擇在離子

Question

多張圖片我有這個網站：

<div ng-repeat="image in images"> 
<img ng-src="img/{{image}}_off.png" /> 
</div> 

而且這個JavaScript控制器：

$scope.images = ['imga','imgb','imgc']; 

我也有這些圖像文件：

imga_off 
imga_on 
imgb_off 
imgb_on 
imgc_off 
imgc_on 

我需要在單擊圖像時在開啓和關閉之間切換。

我不太確定最好的方法是什麼。 是否爲每個img元素附加ng模型？ 或者有沒有更好的方法來做到這一點？

Answer 1

在$scope變量保持撥動數據：

var $scope.toggles = [false, false, false];

切換基於$index：

<div ng-repeat="image in images"> 
    <img ng-src="img/{{image}}_{{ toggles[$index] ? 'on' : 'off' }}.png" ng-click="toggles[$index] = !toggles[$index]"/> 
</div> 

注：此代碼是未經測試，但是這是一個普遍的做法。您也可以保存切換數據作爲$scope.images的一部分