AngularJs CheckBox conundrum

Question

My view has

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

<p>campaign.paused == {{campaign.paused}}</p>

with the <p> being for debugging. It shows false, as it shoudl, given the data, but in the controller

$scope.CampaignPauseClicked = function(campaign, $event)
{
    campaign.paused = ! campaign.paused;

when I breakpoint on the first code line, the value of campaign.paused is true (!).

I have searched the code and campaign.paused is not being written elsewhere.

Any idea what could be happening here?

[Update] I am using an ng-click fucntion, which I have not shown in its entirity, because I need it to "swallow" the $event and prevent it from propogating to the parent.

since you are doing campaign.paused = ! campaign.paused; its normal for campaign.paused to be true — Sarantis Tofas
– Sarantis Tofas, Commented Apr 24, 2016 at 13:43
I am sorry, but I don't understand your comment (my bad). That statement is supposed to toggle the current value. Do you see some wrong in it? — Mawg
– Mawg, Commented Apr 24, 2016 at 15:44
its simple. when you are clicking on the checkbox your model ng-model="campaign.paused" gets the value of true this is done automatically because of Angular. What you do in your code is to reverse that and have true when the checkbox is not clicked and false when it is. It looks that you need to read on the ng-model directive docs.angularjs.org/api/ng/directive/ngModel — Sarantis Tofas
– Sarantis Tofas, Commented Apr 24, 2016 at 15:54

Yaron Schwimmer · Accepted Answer · 2016-04-24 13:54:54Z

2

That's because ng-model is updating the value when you click the checkbox. You're undoing what Angular is doing for you.

If you want to do it by yourself in your $scope.CampaignPauseClicked function, remove the ng-model part from the html.

Otherwise, you can let Angular do its thing, leave the ng-model="campaign.paused" clause, and remove the first line from your ng-click callback.

answered Apr 24, 2016 at 13:54

Yaron Schwimmer

5,3675 gold badges40 silver badges60 bronze badges

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

1 Comment

Mawg Over a year ago

Lolx!! How could I make such a clueless n00b mistake?? Of course, your correct (+1 and the answer). There is no need for me to toggle the checked state, since the ng-model is doing that for me. How embarrassing :-/

Sarantis Tofas · Accepted Answer · 2016-04-24 14:32:05Z

1

Also you can replace the ng-click with the ng-change directive since you are using a checkbox. ng-change will run everytime the checkbox state is changed (checked/unchecked)

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

<p>campaign.paused == {{campaign.paused}}</p>

And in your controller:

$scope.CampaignPauseChanged = function(event)
{
    console.log(campaign.paused)
    console.log(event)
}

Another option would be the ng-checked directive here is an example in this plunker. As you can clearly see the checkbox model returns true only if it is checked.

edited Apr 24, 2016 at 14:32

answered Apr 24, 2016 at 14:15

Sarantis Tofas

5,1871 gold badge26 silver badges36 bronze badges

1 Comment

Mawg Over a year ago

Thanks (+1). I apoliogze because I did not explain that I need to use ng-clck - I have now updated the question to explain why.

Collectives™ on Stack Overflow

AngularJs CheckBox conundrum

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related