Weird AngularJS checkbox behviour

Question

I have the following HTML

<div ng-repeat="campaign in campaigns" >
    <label for="campaignPaused">Paused</label>
    <input type="checkbox" ng-model="campaign.paused"class="check_box" />
    <p>campaign.paused == {{campaign.paused}}</p>

Initially, the debug text shows that $scope.campaign.paused is false, which is correct, and the checkbox is correctly unchecked.

If I click the checkbox, the debug text changes to true, but the checkbox remains visually unchecked.

Subsequent clicks to the checkbox have no effect.

Now for the weird part: if I remove that ng-click="CampaignClicked($event, campaign.campaign_id)" then the checkbox works correctly!

Aha!, I thought - the click on the checkbox is peculating up to its parent. And, it was, although that CampaignClicked() simply swallowed the event and returned, sicne it wasn't ewxpecting ot be clicked.

To make things clearer, I changed the checkbox to

<input type="checkbox" ng-model="campaign.paused" ng-click="SwallowClick($event)" class="check_box" />

where I have declared

$scope.SwallowClick = function($event)
{
   if ($event.cancelable) 
       $event.preventDefault();

     $event.stopPropagation();   

   return false;   // don't handle event further
}

But, the checkbox is still behaving as before.

Can anyone see why? (Note that if I move the checkbox before the DIV, it works correctly)

I'm not sure I understand the question: you're explicitely preventing the event from doing its default action and to propagate, and yet you're wondering why it doesn't do its default action (checking the checkbox) and propagate. What are you trying to achieve exactly? — JB Nizet
– JB Nizet, Commented Apr 2, 2016 at 8:06
I am preventing a click on a checkbox within a DIV from propagating out to the DIV. I would still like the checkbox to toggle — Mawg
– Mawg, Commented Apr 2, 2016 at 8:07

Anik Islam Abhi · Accepted Answer · 2016-04-02 08:11:35Z

1

Your problem is here

if ($event.cancelable) 
       $event.preventDefault();

It's preventing further action within checkbox. Remove that code from your event.

From event.preventDefault()

If this method is called, the default action of the event will not be triggered

DEMO

answered Apr 2, 2016 at 8:11

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

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

3 Comments

Mawg Over a year ago

Why did it not work at first, before I added ng-click="SwallowClick($event)" to the checkbox?

Anik Islam Abhi Over a year ago

It won't work for the code that i mentioned in my answer

Mawg Over a year ago

Nvm, I reworked all of the event propagation in the app

Collectives™ on Stack Overflow

Weird AngularJS checkbox behviour

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