Angular binding not working properly on checkbox (webkit)

Question

I have this code:

<input type="checkbox" ng-checked="item.selected == 'yes'"  ng-click="change()">{{item.selected}}<br/>

http://jsfiddle.net/NmQXp/2/

As you can see, there are three identical checkboxes, with their checked status binded to the value of some string. The catch is that I want to introduce an intermediate "partially selected" state to the checkboxes. In fact what I want to do is use the checkbox to change the value from "pending" to "ongoing" and then to "done" (I'm making a ToDo list).

If you click one of them several times you can see the correct behavior in the others, but the checked status is wrong in the one you are clicking.

¿Is this a bug in Angular Binding, or am I missing something?

Chandermani · Accepted Answer · 2013-07-15 02:48:38Z

2

Well i tried to fix your fiddle to take care of the checked issue. The behavior was inconsistent because checkbox gets checked when mouse is clicked over it due to the default HTML behavior. I added these lines to prevent the default behavior for checkbox.

 if ($scope.item.selected == 'no') {
            $scope.item.selected = 'halfway';
            $event.preventDefault();
        }

Here is the updated fiddle.

http://jsfiddle.net/cmyworld/J27jN/

answered Jul 15, 2013 at 2:48

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

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

3 Comments

Sebastián Grignoli Over a year ago

Thanks! I didn't know you could pass the event as a parameter.

Sebastián Grignoli Over a year ago

I can't find this $event wrapper for the event anywhere in the documentation. Where did you get it from? And what other variables have we available inside angular expressions? Is there a list of them?

Chandermani Over a year ago

Well i don't remember, but it was definitely not from the documentation. Most probably from some old SO question :)

Collectives™ on Stack Overflow

Angular binding not working properly on checkbox (webkit)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related