AngularJS: Grandchild checkbox select from Parent checkbox

Question

I'm trying to create a hierarchy of checkboxes in AngularJS. I can create a parent checkbox that will automagically check the child checkbox, and if I manually check the child checkbox, it will update its child's (the grandchild of the parent) checkbox. However, if I click the parent checkbox, it will not update the grandchild's checkbox.

Before I go adding in JavaScript to make sure the parent checkbox updates the grandchild's checkbox, I'd just like to know if there's an easier way. Here's my code and a jsFiddle for your enjoyment.

<div ng-app="">
    <strong>Parent</strong> (will check all Child boxes):
    <input type="checkbox" ng-model="parent" />
    <br/>
    <strong>Child 1</strong>:
    <input type="checkbox" ng-checked="parent" />
    <br />
    <strong>Child 2</strong>:
    <input type="checkbox" ng-checked="parent" />
    <br />
    <strong>Child 3</strong> (will check all Grandchild boxes):
    <input type="checkbox" ng-checked="parent" ng-model="child" />
    <br />
    <strong>Grandchild 1</strong>:
    <input type="checkbox" ng-checked="child" />
    <br />
    <strong>Grandchild 2</strong>:
    <input type="checkbox" ng-checked="child" />
    <br />
    <strong>Grandchild 3</strong>:
    <input type="checkbox" ng-checked="child" />
</div>

Any help would be appreciated!

Also, could someone with 1500 rep help me out by creating the tag "angularjs-ng-checked"? That'd be awesome!

I recently wrote something just like this: jsfiddle.net/langdonx/hQqQV/2. I just used the model and iterated through some arrays to see if everything was checked or not (instead of checking dom elements). See $scope.groupChecked and _syncGroupCheckBox (called by $scope.unitChecked). — Langdon
– Langdon, Commented Apr 23, 2013 at 17:29
That could help with the JavaScript part, but I'm more interested in a much simpler approach before I decide to get fancy. Appreciate the code though! — incutonez
– incutonez, Commented Apr 24, 2013 at 0:54
Unfortunately there is no simpler approach. This cannot be done simply through HTML. See Misko's comments here: github.com/angular/angular.js/pull/1057 — Langdon
– Langdon, Commented Apr 24, 2013 at 13:47
Hmm, interesting. Guess I'll start down the path of adding this to the scope. If you add your last comment as an answer, I'll accept it. — incutonez
– incutonez, Commented Apr 24, 2013 at 14:23

Langdon · Accepted Answer · 2013-04-24 14:45:46Z

3

Unfortunately there is no simpler approach.

From Misko via github:

... we think what you are trying to do does not make sense. ng-checked creates a one-way data-binding but ng-model creates two-way databinding. In essence you have two models connected to the same input element, and i think that that is just wrong. I think ng-model and ng-checked should be used exclusively, ie one or the other but not together.

Outside of using a directive or synchronizing the checks yourself in a controller, there are not a whole lot of options.

answered Apr 24, 2013 at 14:45

Langdon

20.1k18 gold badges90 silver badges108 bronze badges

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

Comments

incutonez · Accepted Answer · 2013-04-25 00:41:05Z

I've been doing some fiddling (ha ha) around, and I came up with a solution that seems to be pretty generic... meaning, you can have as many nested checkboxes as your heart desires. I'm sure there are some strange practices that I'm following, and there may be areas where performance could be increased--this is definitely looping through lots of objects--so feel free to criticize it! I'd love to hear any feedback.

The code can be found at this jsFiddle. I'll also post it here.

The HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="../js/angularjs106.js"></script>
    <script src="angular_checkbox.js"></script>
    <link rel="stylesheet" href="angular_checkbox.css" />
  </head>
  <body ng-app>
    <div ng-controller="Ctrl">
      <ul>
        <li>
          <input type="checkbox" value="allChecks.id" ng-model="allChecks.isChecked" ng-change="checkChange(allChecks)">
          <label>{{allChecks.id}}</label>
        </li>
        <li ng-repeat="child in allChecks.children">
          <input type="checkbox" ng-model="child.isChecked" ng-change="checkChange(child)">
          <label>{{child.id}}</label>
          <ul>
            <li ng-repeat="grandchild in child.children">
              <input type="checkbox" ng-model="grandchild.isChecked" ng-change="checkChange(grandchild)">
              <label>{{grandchild.id}}</label>
              <ul>
                <li ng-repeat="grandgrandchild in grandchild.children">
                  <input type="checkbox" ng-model="grandgrandchild.isChecked" ng-change="checkChange(grandgrandchild)">
                  <label>{{grandgrandchild.id}}</label>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>  
</html>

The JavaScript

function Ctrl($scope) { 
  function Node(id, isChecked, parent) {
    this.id = id;
    this.isChecked = isChecked;
    this.parent = parent;
    this.children = [];
  }

  var parent = new Node('ALL', true, "");
  var child1 = new Node('Child 1', true, parent);
  var gchild1 = new Node('Grandchild 1', true, child1);
  var gchild2 = new Node('Grandchild 2', true, child1);
  var gchild3 = new Node('Grandchild 3', true, child1);
  child1.children.push(gchild1, gchild2, gchild3);
  var child2 = new Node('Child 2', true, parent);
  var child3 = new Node('Child 3', true, parent);
  var child4 = new Node('Child 4', true, parent);
  var gchild4 = new Node('Grandchild 4', true, child4);
  var gchild5 = new Node('Grandchild 5', true, child4);
  var gchild6 = new Node('Grandchild 6', true, child4);
  var ggchild1 = new Node('Grandgrandchild 1', true, gchild6);
  var ggchild2 = new Node('Grandgrandchild 2', true, gchild6);
  var ggchild3 = new Node('Grandgrandchild 3', true, gchild6);
  gchild6.children.push(ggchild1, ggchild2, ggchild3);
  child4.children.push(gchild4, gchild5, gchild6);
  var child5 = new Node('Child 5', true, parent);
  parent.children.push(child1, child2, child3, child4, child5);
  $scope.allChecks = parent;

  function parentCheckChange(item) {
    for (var i in item.children) {
      item.children[i].isChecked = item.isChecked;
      if (item.children[i].children) {
        parentCheckChange(item.children[i]);
      }
    }
  }

  function childCheckChange(parent) {
    var allChecks = true;
    for (var i in parent.children) {
      if (!parent.children[i].isChecked) {
        allChecks = false;
        break;
      }
    }
    if (allChecks) {
      parent.isChecked = true;
    }
    else {
      parent.isChecked = false;
    }
    if (parent.parent) {
      childCheckChange(parent.parent);
    }
  }

  $scope.checkChange = function(item) {
    // We're handling the ALL checkbox
    if (item.id === $scope.allChecks.id) {
      parentCheckChange(item);
    }
    // We're handling the toggling of all of the children here
    else {
      if (item.children) {
        parentCheckChange(item);
      }
      childCheckChange(item.parent);
    }
  };
}

The tiny CSS

ul {
  list-style: none;
}

Anyway, I wanted to figure out a way of finding the parent in an object. Turns out, the native JavaScript object doesn't hold a reference to a child's parent object, so I decided to create a class called Node. When I instantiate the Node, I can set the parent to the object that contains the child. Once I do this, recursion becomes quite easy.

parentCheckChange is called when we realize we have a parent. childCheckChange is called when the child's check changes (duh!), but it's used to keep an eye on all of the parent's children... if all of them are checked, then we need to make sure the parent is checked, and because this parent has been checked, we need to check if its parent should be checked (recursively).

The code may be a bit confusing, so please ask questions if you're confused!

Collectives™ on Stack Overflow

AngularJS: Grandchild checkbox select from Parent checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related