Image as checkbox in Angular

Question

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.

Reto Aebersold · Accepted Answer · 2014-06-20 16:20:56Z

2

I updated the plunker. There were three small errors:

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

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

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

You used ng-class in the wrong order:
```
ng-class="{selected: isSelected}"
```

answered Jun 20, 2014 at 16:20

Reto Aebersold

16.7k5 gold badges58 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Image as checkbox in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related