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

Question

How to bind tree structure to accordion using angular. The tree structure is like parent and child. How to get this? Am able to bind 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 bind tree to accordion but not getting,

<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>

is there any options to bind tree in other way either accordion but using angular

Try This [Link](http://stackoverflow.com/questions/37108946/how-to-put-ng-repeat-inside-ng-repeat-for-n-number-of-times/37109091#37109091) For manage tree structure in angularJS — byteC0de, Dec 16 '16 at 05:20

score 0 · Answer 1 · answered Jan 30 '17 at 16:17

Certainly there is a way to bind to this tree in AngularJS! To me this seems like a great use case for ngRepeat! Try this:

<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 then I would add another property to each object, isExpanded (or whatever you want to call it). Then you can hide/show the expanded content with ngIf, 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 could also have nice animated transitions for expanded and closing the div with ngAnimate.

You could also check out Angular UI-Bootstrap Accordian or (and here's a codepen example of it: http://codepen.io/funkybudda/pen/vEbgVv)

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

Good luck!

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

1 Answers1