CODEWITHSUNDEEP
imageangularjscheckboxinput
ka8725
ka8725

Reputation: 2918

Image as checkbox in Angular

I'm going to implement an element in Angular which would be able to set a value to a hidden field and change a state of the element on mouse click. Shortly, I need an image which behaves like a checkbox. To implement this element I decided to make a Angular "directive". But when I change the value of the container selection state, the 'selected' class is not added to the container. How to do this in right way with Angular?

Also I can't figure out how to update the input's value, what technique to choose here. Note, that initial state of the hidden field goes from a server side.

This is a demo of the problem: demo.

Upvotes: 2

Views: 2072

Answers (1)

Reto Aebersold
Reto Aebersold

Reputation: 16644

I updated the plunker. There were three small errors:

  1. Your CSS class for .selected was missing the solid attribute for the border.

  2. You need to call $apply in your directives click listener to update the scope:

    el.on('click', function() {
  scope.isSelected = !scope.isSelected;
  scope.$apply();
});

  3. You used ng-class in the wrong order:

    ng-class="{selected: isSelected}"

Upvotes: 2

Related Questions