CODEWITHSUNDEEP
javascriptjqueryangularjs
nbi
nbi

Reputation: 1386

angularjs: Change checkbox to image on selection

I want to implement a functionality in which, whenever a user checks a checkbox, it will get replace with a check image. For example:

enter image description here

So if I select first option it should get replace with a check image. enter image description here

I am able to replace the checkbox with image, but this new element looses the ng-click event.

Below is the code:

  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);
    }
};

below is the html generated for the new element (image)

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

Upvotes: 1

Views: 1117

Answers (1)

fedorshishi
fedorshishi

Reputation: 1477

If angular way you have to use ng-show(or ng-if) for hide or show image and checkbox depends of the state. They both have to use same on-click callback. Here is the basic idea on pseudocode

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

Upvotes: 2

Related Questions