如何使用AngularJS将树结构绑定到手风琴或列表（li）答案

【问题标题】：How to bind tree structure to accordion or list(li) using AngularJS如何使用AngularJS将树结构绑定到手风琴或列表（li）
【发布时间】：2017-05-01 20:12:21
【问题描述】：

如何使用 Angular 将树结构绑定到手风琴。树结构就像父母和孩子。如何得到这个？能够绑定完整列表。

角码：

 $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

      }
    ];

视图：我试图将树绑定到手风琴但没有得到，

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

是否有任何选项可以以其他方式绑定树，无论是手风琴还是使用角度

【问题讨论】：

试试这个Link在angularJS中管理树结构

标签： angularjs asp.net-mvc

【解决方案1】：

当然有一种方法可以在 AngularJS 中绑定到这棵树！对我来说，这似乎是ngRepeat 的一个很好的用例！试试这个：

<div ng-repeat="(key, value) in groups"

  <h1> {{value.ID}} </h1>
  <h2> {{value.Name}} </h2>
  <h3> {{value.ParentID}} </h3>

</div>

如果您希望面板展开，那么我会为每个对象添加另一个属性，isExpanded（或任何您想调用的名称）。然后您可以使用ngIf 隐藏/显示展开的内容，如下所示：

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

您还可以使用 ngAnimate 进行扩展和关闭 div 的漂亮动画过渡。

您也可以查看Angular UI-Bootstrap Accordian 或（这是一个 codepen 示例：http://codepen.io/funkybudda/pen/vEbgVv）

这是一个 AngularJS 手风琴的 plunkr 示例：http://embed.plnkr.co/3y0Rq1/

祝你好运！

【讨论】：