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

Tom Makin · Accepted Answer · 2015-01-01 22:47:15Z

1

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/

edited Jan 1, 2015 at 22:47

answered Jan 1, 2015 at 21:12

Tom Makin

3,32326 silver badges24 bronze badges

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

4 Comments

chrney Over a year ago

whoa, thanks, nice one! One more thing: how can I submit this as a form and get all the id's of the checked boxes, any idea? What could I grab in a http post, and send as data to the backend service?

Tom Makin Over a year ago

Given the way you are binding the checkboxes you can just loop through the items in your original $scope.tree and pull out the checked items. See link to second fiddle above.

Tom Makin Over a year ago

Got my fiddles a bit muddled but I think the links are right now

chrney Over a year ago

Speechless. Thanks so much!

Collectives™ on Stack Overflow

Angular checkboxes in tree view

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related