How to get the updated model after change the checkbox state using the ng-checked

Question

I have certain conditions for checking a checkbox and I am using the function logic for that inside the ng-checked with conditional operators. That's working fine for me. The problem is that upon submitting the model values I'm not getting the ng-checked values. How to get that ng-checked values modified as well? Hope I get an answer. This is I have tried:

<input type="checkbox" id="View" ng-model="module.View"
       ng-checked="((findViewCheckBoxIsChecked(module)) || (module.ViewAll))"
       ng-disabled="disableCheckBox(module)">

$scope.findViewCheckBoxIsChecked = function (module) {    
      if (module.View || module.ViewAll || module.Name == 'x' && module.Add
            || module.Name == 'x' && module.Edit
            || module.Name == 'x' && module.Delete
            || module.Name == 'x' && module.Add
            || module.Name == 'y' && module.Edit
            || module.Name == 'y' && module.Delete
             || module.Name == 'z' && module.Add
            || module.Name == 'z' && module.Edit
            || module.Name == 'z' && module.Delete) {
            return true;
        }
        else {
            return false;
        }
    }

I don't think I understand the question. Also, post the code for `findViewCheckBoxIsChecked` if possible. — lealceldeiro, Jul 06 '18 at 15:30
Well, I see a lot of conditionals there. To be honest, we should see this in context, for instance, what values does `module` have when the issue arises? If you could create a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) ... that would help a lot. — lealceldeiro, Jul 06 '18 at 15:37
moudle is the model object bro.If i click one checkbox means another checkbox also to be checked for that this if else code.The problem is the secondly checked checkbox is not reflect in model object after submit. This is my problem bro. — s Jagathish, Jul 06 '18 at 15:42

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

The documentation for ng-checked clearly states that it should not be used with ng-model.

From the Docs:

ngChecked

Sets the checked attribute on the element, if the expression inside ngChecked is truthy.

Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior.

— AngularJS ng-checked Directive API Reference

Update

Oh...I didn't Know this...Then how to set the value for the checkboxes that I have to check? Any Ideas?

One can use the ng-change directive to compute values for sibling checkboxes:

<input type="checkbox" id="ViewAll" ng-model="module.ViewAll"
       ng-change="updateCheckboxes(module)" />

<input type="checkbox" id="View" ng-model="module.View"
       ̶n̶g̶-̶c̶h̶e̶c̶k̶e̶d̶=̶"̶(̶(̶f̶i̶n̶d̶V̶i̶e̶w̶C̶h̶e̶c̶k̶B̶o̶x̶I̶s̶C̶h̶e̶c̶k̶e̶d̶(̶m̶o̶d̶u̶l̶e̶)̶)̶ ̶|̶|̶ ̶(̶m̶o̶d̶u̶l̶e̶.̶V̶i̶e̶w̶A̶l̶l̶)̶)̶"̶
       ̶n̶g̶-̶d̶i̶s̶a̶b̶l̶e̶d̶=̶ ̶"̶d̶i̶s̶a̶b̶l̶e̶C̶h̶e̶c̶k̶B̶o̶x̶(̶m̶o̶d̶u̶l̶e̶)̶"̶ 
       ng-disabled= "disableViewCheckBox"
       ng-change="updateCheckboxes(module)" />

$scope.updateCheckboxes = function(module) {
    module.View = (($scope.findViewCheckBoxIsChecked(module)) || (module.ViewAll));
    $scope.disableViewCheckbox = $scope.disableCheckBox(module);
};

Putting functions inside AngularJS expressions should be avoided for performance reasons. The framework invokes those one or more times each digest cycle. By using the ng-change directive, the functions are invoked only when the user changes an input.

Of course the ng-change function is only invoked for user input. The controller should also invoke the $scope.updateCheckboxes function when it assigns new model values.

Oh...I didn't Know this...Then how to set the value for the checkboxes that I have to check? Any Ideas? — s Jagathish, Jul 06 '18 at 15:55

How to get the updated model after change the checkbox state using the ng-checked

1 Answers1

ngChecked

Update