Ways to choose all checkboxes using a Master checkbox in AngularJS

Question

Ways to choose all checkboxes using a Master checkbox in AngularJS

In my setup, I have a Top Master select box that can activate or deactivate checkboxes for Master 1 and Master 2. Additionally, each of the Masters has 4 Slave checkboxes that can be activated or deactivated accordingly. The implementation uses ng-model and ng-checked directives.

For example:

<input type="checkbox" ng-checked="top" ng-model="master1"/> Master 1

Now, my query is:

When the TOP Master is selected, why aren't the slaves of Master 1 and Master 2 automatically selected, even though their ng-models (Master 1 and Master 2) are already selected? However, selecting either Master 1 or Master 2 results in their respective slaves getting selected.
If all 4 slaves under a Master are selected, the Master itself should also be selected. Furthermore, when both Masters are selected, then the TOP Master should automatically get selected as well. How can this functionality be achieved? And which controller should be utilized for this purpose?

Please review the code on Fiddle http://jsfiddle.net/aF2aL/32/

javascript angularjs checkbox

Answer 1

Answer №1

To make the necessary change, modify ng-checked="master1" to ng-checked="(master1||top)&&master1"

<div ng-controller="myCtrl">
    <input type="checkbox" ng-model="top"/> Top Master
   <ul> <input type="checkbox" ng-checked="top" ng-model="master1"/> Master 1  
        <ul ng-repeat="slave in slaveOne"> 
              <input id="checkSlave" type="checkbox" ng-checked="(master1||top)&&master1"/>{{slave.name}} 
        </ul>
    </ul>

  <ul>  <input type="checkbox" ng-checked="top" ng-model="master2"/> Master 2  
        <ul ng-repeat="slave in slaveTwo"> 
            <input id="checkSlave" type="checkbox" ng-checked="(master2||top)&&master2"/> {{slave.name}}
      </ul> 
  </ul>

Answer 2

To make the necessary change, modify ng-checked="master1" to ng-checked="(master1||top)&&master1"

<div ng-controller="myCtrl">
    <input type="checkbox" ng-model="top"/> Top Master
   <ul> <input type="checkbox" ng-checked="top" ng-model="master1"/> Master 1  
        <ul ng-repeat="slave in slaveOne"> 
              <input id="checkSlave" type="checkbox" ng-checked="(master1||top)&&master1"/>{{slave.name}} 
        </ul>
    </ul>

  <ul>  <input type="checkbox" ng-checked="top" ng-model="master2"/> Master 2  
        <ul ng-repeat="slave in slaveTwo"> 
            <input id="checkSlave" type="checkbox" ng-checked="(master2||top)&&master2"/> {{slave.name}}
      </ul> 
  </ul>

Ways to choose all checkboxes using a Master checkbox in AngularJS

Answer №1

Similar questions

Could not load ngx-restangular due to an error: (SystemJS) Module not yet loaded while trying to load "@angular/core"

Transform jQuery timer functionality to support both minutes and seconds for redirecting, rather than just seconds

Is there a Javascript database that functions seamlessly on Android, IOS, and Windows Phone 8 (Internet Explorer 10)?

Looping through Angular injection

HtmlUnit: clicking on an anchor element does not result in the event being triggered

Exploring ways to display dynamic content within AngularJs Tabs

Combining shared table rows with embedded ruby code in Javascript - is it possible?

AngularJS Formly's ui-mask feature: Stripping input mask characters from the model

AngularJS - Issue encountered while attempting to inject a service from an external module

Learn how to move a div inside another div using drag and drop, ensuring that the entire element moves along with it

Leveraging underscore.js for null verification

Create a toggle effect similar to jQuery using JavaScript

Working with string interpolation in SQLite3 and Nodejs

Display exclusively the chosen option from the dropdown menu

Learning how to utilize localStorage in conjunction with a color picker to modify the --var of :root

Utilizing React for Redirecting to an External Site

Could you please ensure that the animation activates upon hovering over the "a" element?

Check to see if a variable has been assigned a value in the form of a jquery

How come my AngularJS view isn't loading properly on Cordova?

What is the best way to fill multiple select options using a universal function in AngularJS?