CODEWITHSUNDEEP
angularjs
Sebastián Grignoli
Sebastián Grignoli

Reputation: 33462

Angular binding not working properly on checkbox (webkit)

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?

Upvotes: 0

Views: 1078

Answers (1)

Chandermani
Chandermani

Reputation: 42669

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/

Upvotes: 2

Related Questions