AngularJSを使用して、アコーディオンまたはリスト（li）にツリー構造をバインドする方法

Question

角度を使用してアコーディオンにツリー構造をバインドする方法。木構造は親と子のようなものです。これを得る方法？完全なリストを縛ることができます。

角度コード：

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

は、他の方法のいずれかのアコーディオンでツリーをバインドする任意のオプションがありますが、角度を使用して

Answer 1

確かにAngularJSのこのツリーにバインドする方法があります！私にとってこれはngRepeatの大きなユースケースのようです！あなたはパネルが展開したい場合は、私はisExpandedとして（または何でもあなたはそれを呼びたい）、各オブジェクトに別のプロパティを追加します

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

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

</div> 

：これを試してみてください。

<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を閉じるための素晴らしいアニメーションの遷移をも持つことができ：そして、あなたはこのような何か、ngIfと拡大したコンテンツを表示/非表示にすることができます。

ます。またAngular UI-Bootstrap Accordianまたは をチェックアウト（とここでのcodepen例です：http://codepen.io/funkybudda/pen/vEbgVv）ことができます：http://embed.plnkr.co/3y0Rq1/

幸運

ここでは、AngularJSアコーディオンのplunkr例です！