Javascript angularjs：选择时将复选框更改为图像

我想实现一个功能，在这个功能中，每当用户选中复选框时，它都会被替换为选中图像。例如：

所以，如果我选择第一个选项，它将被替换为检查图像。

我可以用图像替换复选框，但是这个新元素会释放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);
    }
};

currentController.changeChoice=函数（$event，value）{
if（$event.target.checked）{
currentController.selectedOptions.push（值）；
$（$event.target）.replace为（'-1”/>）；
}
否则{
var index=currentController.selectedOptions.indexOf（值）
currentController.selectedOptions.splice（索引1）；
}
};

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

-1”>

如果角度不同，则必须使用ng show（或ng If）来隐藏或显示图像，复选框取决于状态。它们都必须使用相同的点击回调。下面是关于伪代码的基本思想

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

---

如果您将复选框图像作为分层图像放在输入字段前面，并在单击复选框时显示出来，那么如果复选框图像具有透明度，则效果会更好。然后，您只需在单击时显示/隐藏复选框图像，复选框本身将是一个静态元素。（您可能必须将复选框渲染为图像，或者执行一些忍者技巧，以便在单击复选框时不更改其状态。）

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