How to bind tree structure to accordions or list (li) using AngularJS

Question

How to associate a tree structure with an accordion using angular. The tree structure is similar to the parent and child. How to get it? I can link the complete list.

angular code:

$scope.groups = [ { ID: 1, Name: "parent", ParentID:0 }, { ID: 2, Name: "child", ParentID: 1 }, { ID: 3, Name: "subchild1", ParentID: 2 }, { ID: 4, Name: "subchild2", ParentID: 2 } ]; 

View: I tried to connect the tree with the accordion, but I don’t get

 <uib-accordion close-others="oneAtATime"> <div uib-accordion-group class="panel-default" ng-repeat="grp in groups" is-open="status.open"> <uib-accordion-heading> {{grp.Name}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> </uib-accordion-heading> {{grp.Name}} </div> </uib-accordion> 

are there any options to bind the tree in another way either using the accordion but using angular

Answer 1

Of course, there is a way to bind this tree in AngularJS! For me, this seems like a great option for ngRepeat ! Try the following:

 <div ng-repeat="(key, value) in groups" <h1> {{value.ID}} </h1> <h2> {{value.Name}} </h2> <h3> {{value.ParentID}} </h3> </div> 

If you want the panels to expand, I added another property to each object, isExpanded (or whatever you want to name). Then you can hide / show ngIf extended content, something like this:

 <div ng-repeat="(key, value) in groups" <h1> {{value.ID}} </h1> <h2> {{value.Name}} </h2> <h3> {{value.ParentID}} </h3> <div ng-if="value.isExpanded === true"> <h3> Expanded content </h3> </div> </div> 

You can also have nice animated transitions to expand and close the div using ngAnimate .

You can also check out Angular UI-Bootstrap Accordian or (and here is a sample code: http://codepen.io/funkybudda/pen/vEbgVv )

Here's an example of a plunkr angular harmonic: http://embed.plnkr.co/3y0Rq1/

Good luck