angularjs：更改复选框以选择图像

Question

我想实现一种功能，只要用户选中复选框，它就会被检查图像替换。例如：

因此，如果我选择第一个选项，它应该替换为支票图像。

我可以用图像替换复选框，但是这个新元素会丢失ng-click事件。

以下是代码：

  currentController.changeChoice = function ($event, value) {

    if ($event.target.checked) {
        currentController.selectedOptions.push(value);
        $($event.target).replaceWith('<div ng-click="stock.changeChoice($event,option);"><img src="../images/check.png"  alt="remove" ng-checked="stock.selectedOptions.indexOf(option) > -1" /> </div>');
    }
    else {
        var index = currentController.selectedOptions.indexOf(value)
        currentController.selectedOptions.splice(index, 1);
    }
};

下面的

是为新元素（图像）生成的html

<div ng-click="stock.changeChoice($event,option);"><img src="../images/check.png" alt="remove" ng-checked="stock.selectedOptions.indexOf(option) > -1"></div>

Answer 1

如果采用角度方式，则必须使用ng-show（或ng-if）隐藏或显示图像，复选框取决于状态。他们都必须使用相同的点击回调。这是关于伪代码的基本思想

<input ng-show="!is_checked" ng-click="callback()" ... />
<img  ng-show="is_checked" ng-click="callback()" ... />