1
<input type="checkbox"
       ng-checked="testModel.child_1 && testModel.child_2 && testModel.child_3 &&     testModel.child_4 && testModel.child_5"
       ng-model="isChecked"/>

My goal is to understand the documentation on ng-checked and its appropriate use with ng-model when using a checkbox. I actually thought I had understood it and was attempting to write some examples.

I thought that it could be used to select and deselect all children checkboxes while updating the ng-model for each child. I can use ng-model to store the check value in scope only when a child is selected by the user. When the parent is selected its value is reflected as changed it does not change any of the children.

I have three examples in my fiddle and the first shows the behaviour I expected in the other two examples. IOW, I am surprised that the children checkboxes are not initiated with the testmodel nor are the parent values ever registered with the testmodel. Is this the expected out of the box behaviour or is there something wrong with my debugging?

http://jsfiddle.net/gogirl/7857c/2/

georgeawg
  • 48,608
  • 13
  • 72
  • 95
scalaGirl
  • 335
  • 4
  • 17
  • 1
    Don't use `ng-checked` with `ng-model`. Use `ng-checked` for one-way binding; Use `ng-model` for two-way binding. – georgeawg May 22 '19 at 13:46

2 Answers2

1

Don't use ng-checked with ng-model. Use ng-checked for one-way binding; Use ng-model for two-way binding.

From the Docs:

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

For more information, see

georgeawg
  • 48,608
  • 13
  • 72
  • 95
0

Here's how I approached your problem. It gets it working and can be refactored from here pretty easily I think:

Html:

<body ng-app="myApp">
  <div ng-controller="MyCtrl">

   lightbulb is {{state}}     <input type="checkbox" ng-model=
   "state" ng-true-value="on" ng-false-value="off"> 

    <div ng-repeat="image in images"> 
        <a ng-click="toggleImage(state)">
            <img  ng-src="{{toggleImage(state)}}" />                                 
        </a>

    </div>
   </div>
</body>

JS:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.state = "on";
  $scope.imgUrl = null
  $scope.images = [
    {imgUrl: 'http://www.w3schools.com/js/pic_bulboff.gif'}
  ];

  $scope.toggleImage = function (state) {
    onUrl = 'http://www.w3schools.com/js/pic_bulbon.gif'
    offUrl = 'http://www.w3schools.com/js/pic_bulboff.gif'
    if (state === "on") {
        imgUrl = onUrl;
    } else {
        imgUrl = offUrl; 
    }
    return imgUrl;
};
}
JeremyS
  • 427
  • 2
  • 7
  • You can also toggle the lightbulb itself through a click event with something like so: http://jsfiddle.net/c92xq/ – JeremyS Nov 04 '13 at 00:58
  • Jeremy your answer is right but my fiddle was not the intended one. I seem to have not updated my fiddle so I will try to resubmit my question and then if succeed delete this one. My sincere apologies. – scalaGirl Nov 04 '13 at 09:14
  • Good question, but this answer does not address how to handle master/slave checkboxes. – Mark Mar 18 '14 at 10:59