如何使用AngularJS将树结构绑定到accordion或list(li)

前端之家收集整理的这篇文章主要介绍了如何使用AngularJS将树结构绑定到accordion或list(li)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何使用角度将树结构绑定到手风琴.树结构就像父母和孩子.怎么弄这个?能够绑定完整列表.

角度代码

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

是否有任何选项以其他方式绑定树手风琴但使用角度

解决方法

当然有一种方法可以绑定到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
(这里是它的代码示例:http://codepen.io/funkybudda/pen/vEbgVv)

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

祝好运!

猜你在找的Angularjs相关文章