AngularJS uiブートストラップを使用した入れ子式アコーディオン

Question

親と子の関係を持つUIブートストラップを使用してAngularJSでアコーディオンを作成したいとします。

問題1：親にはn個の兄弟姉妹と子どももいます。

問題2：子はn個の内部子も持つことができます。それは最後の子供まで深く入れ子にされなければならない。

問題3：親にはチャイルドもありません。

[ 
    { 
     "bu_id": 8, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "Parent 2", 
     "created_date": "2016-06-26 11:31:07", 
     "updated_date": "2016-06-26 11:31:07", 
     "parent_id": null 
    },{ 
     "bu_id": 9, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "Child Of Parent 2", 
     "created_date": "2016-06-26 11:31:47", 
     "updated_date": "2016-06-26 11:31:47", 
     "parent_id": 8 
    },{ 
     "bu_id": 10, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "inner Child Parent 2", 
     "created_date": "2016-06-26 11:36:30", 
     "updated_date": "2016-06-26 11:36:30", 
     "parent_id": 9 
    },{ 
     "bu_id": 11, 
     "tenant_id": 1, 
     "company_id": 1, 
     "bu_name": "Parent 3", 
     "created_date": "2016-06-26 11:36:30", 
     "updated_date": "2016-06-26 11:36:30", 
     "parent_id": null 
    } 
] 

Tree structure

子と親がbu_idとPARENT_ID上で識別されます。

Answer 1

私はこのシナリオを処理するためにng-repeat-endディレクティブを使用します。マークアップは次のようになります。そして、

angular.module.directive('itemRepeater', function() { 
    return { 
     template: '<ul>' + 
        ' <li ng-repeat="item in item.children">' + 
        ' {{item.label}}' + 
        ' <li ng-repeat-end ng-if="item.children">' + 
        '  <item-repeater></item-repeater>' + 
        ' </li>' + 
        ' </li>' + 
        '</ul>'; 
    } 
}) 

：

それはあなたの階層のように深い行くようにするには、「子」の項目のテンプレートを使用してディレクティブを作成することができます

<ul> 
    <li ng-repeat="item in items">{{item.label}}</li> 
    <li ng-repeat-end ng-if="item.children"> 
    <ul> 
     <li ng-repeat="item in item.children">{{item.label}}</li> 
    </ul> 
    </li> 
</ul> 

<ul> 
    <li ng-repeat="item in items">{{item.label}}</li> 
    <li ng-repeat-end ng-if="item.children"> 
    <item-repeater></item-repeater> 
    </li> 
</ul>