Toggling checkbox in AngularJS isn't reflected in the controller

Question

I have a checkbox:

<input ng-model="defaultAssigneeCheckbox" type="checkbox"/>
<p>{{defaultAssigneeCheckbox}}</p>

<button type="submit">Save</button>

Paragraph below it shows and updates its state properly between false and true. Clicking button runs controller function:

$scope.updateProject = function () {
    var project = $scope.project;
    console.log(typeof $scope.defaultAssigneeCheckbox)
    console.log($scope.defaultAssigneeCheckbox)
    if (!$scope.defaultAssigneeCheckbox) {
        delete project.defaultAssignee;
    }
};

When I click button it shows the checkbox as true regardless of whether the checkbox is checked or not.

What am I doing wrong?

What is the output of console.log(typeof $scope.defaultAssigneeCheckbox)? — Thierry Blais, May 15 '14 at 14:03

score 1 · Accepted Answer · edited May 23 '17 at 12:13

1

Hint : respect the "dot rule".

<input ng-model="data.defaultAssigneeCheckbox" type="checkbox" />

edited May 23 '17 at 12:13

Community

1
1

answered May 15 '14 at 14:00

Blackhole

20,129
7
70
68

I have moved defaultAssigneeCheckbox to project object that I have already and it seemed to help. Thanks! – Sergei Basharov May 15 '14 at 14:10

score 0 · Answer 2 · answered May 15 '14 at 13:58

0

Had the same problem yesterday, try using ng-true-value & ng-false-value

<input type="checkbox" ng-model="model.value" ng-true-value="1" ng-false-value="0">

In your case use true & false

answered May 15 '14 at 13:58

Mario Campa

4,092
1
26
25

score 0 · Answer 3 · answered May 15 '14 at 14:12

What is the output of console.log(typeof $scope.defaultAssigneeCheckbox)? I have a feeling it's 'string' in which case $scope.defaultAssigneeCheckbox is always true. therefore try this:

if ($scope.defaultAssigneeCheckbox != true) {
    delete project.defaultAssignee;
}

if that works figure out if you are ok with that or if you need to force a boolean. In which case @Mario Campa's solution looks good. Personally, I'd prefer a boolean because experience dictates that it will be more useful in these cases.

Toggling checkbox in AngularJS isn't reflected in the controller

3 Answers3