Angular checkboxes in tree view

Question

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:

http://jsfiddle.net/u2ho9d3j/

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!

Christoph

Solution

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);
 };
 initTree($scope.tree);

See updated fiddle http://jsfiddle.net/65yucqge/

Edit Here is another fiddle showing how to get the checkbox data into an array: http://jsfiddle.net/tmakin/kmhw1ue0/