javascript - 在 Ionic 中选择多个图像

Question

我有这个html:

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

Controller 中的这段 JavaScript 代码:

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

我还有这些图像文件:

imga_off
imga_on
imgb_off
imgb_on
imgc_off
imgc_on

我需要的是在单击图像时在打开和关闭之间切换。

我不太确定最好的方法是什么。 是为每个 img 元素附加一个 ng-model 吗？ 或者有更好的方法吗？

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

的一部分保存