chrney chrney - 1 year ago 223
AngularJS Question

Angular checkboxes in tree view

I could not find a really good suitable directive for creating a tree view with checkboxes from a JSON-structure, so I did this with a self-calling iterator, as seen here:

Now, the only problem I've got, is that (look at the 'Jeans' data in line 40, there's this:

"chk": true,

This does of course mark the "Jeans"-checkbox, but not the above. These values would come correct from the database (where even the above bransch would have chk = true, but none the less I am curious on how one could trigger the initial "bubble up and mark all the parents as checked" if an item is marked as "true".

Could someone help me out to understand how that could be done?

Thanks a lot!


Answer Source

I would preprocess the tree data in a recursive way similar to your setData function:

 function initTree(tree) {
   function processNode(node) {
     angular.forEach(node.children, function(child) {
       if(processNode(child) === true) {
         node.chk = true;   

     return node.chk;

   angular.forEach(tree, processNode);

See updated fiddle

Edit Here is another fiddle showing how to get the checkbox data into an array:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download