AngularJS Bootstrap Collapsable Treeview

Question

I'm attempting to work the selected answer over at this Stack Overflow question into my AngularJS app. In particular, the JQuery code block

$(function () {
    $('.tree li:has(ul)').addClass('parent_li').find('>span').attr('title', 'Collapse this tree');
    $('.tree li.parent_li >span').click(function (e) {
        console.log("test");
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(":visible")) {
            children.hide('fast');
            $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
            children.show('fast');
            $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
    e.stopPropagation();
    });
});

It appears to work for the first line, as the spans I'm using do have "Collapse this tree" as their tooltip. However, the console.log statement is never fired. I've tried inspecting the element through the browser debugger and all looks fine. I've tried adding the angularJS-generated classes into the JQuery above, as well as tried both $().click and $().on('click') functionality but neither seemed to work.

I also tried toying around with ng-click and just putting this manually on each span but once I got inside the JQuery it had no idea which element had pressed it even through I was passing the ID through the function parameters.

Has anyone had any luck getting this to work with Angular?

I've seen a few places suggest directives for recursively managing the trees but my tree structure doesn't necessarily lend itself to automation since it's based off of our object model.

I would strongly suggest not to try and mix jQuery dom-handling inside an Angular app, especially in a case like this where it's really easy to write a directive that handles collapsing in a tree. There shouldn't be any issue with whatever tree structure you're handling model-side ;) — Jay
– Jay, Commented Aug 3, 2015 at 16:06
Any suggestions on where I would get started with that? I don't need an explicit answer just a push in the right direction. — Friend
– Friend, Commented Aug 3, 2015 at 16:14
Check this answer for recursive directives. You can then add a button that toggles a boolean on each node, and have the children container ng-hide observing said boolean. — Jay
– Jay, Commented Aug 3, 2015 at 16:35

Community · Accepted Answer · 2017-05-23 11:58:59Z

2

Here's a plunkr using the answer mentioned in my comment that handles a collapsing tree.

I basically just added collapsing to the directive template:

<div>
  <span 
    ng-if="item.children && item.children.length" 
    ng-click="item.hideChildren = !item.hideChildren">{{item.hideChildren ? '+' : '-'}}
  </span>
  <span>{{item.label}}</span> 
  <ul ng-if="item.children && item.children.length" ng- hide="item.hideChildren">
    <li ng-repeat="child in item.children">
      <tree-node item="child"></tree-node>
    </li>
  </ul>
</div>

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Aug 5, 2015 at 8:09

Jay

4524 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Bootstrap Collapsable Treeview

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related