如何在AngularJS手風琴主體中獲取動態內容

Question

我可以看到如何在手風琴主體中獲取靜態內容，但無法弄清楚如何生成動態內容。

以例子爲http://angular-ui.github.io/bootstrap/從產生的手風琴......

$scope.groups = [ 
    { 
     title: "Dynamic Group Header - 1", 
     content: "Dynamic Group Body - 1" 
    }, 
    { 
     title: "Dynamic Group Header - 2", 
     content: "Dynamic Group Body - 2" 
    } 
    ]; 

我想實現的是從二級結構，從而產生一個手風琴...

$scope.groups = [ 
    { 
     title: "Dynamic Group Header - 1", 
     items: {[item-title: "item 1", item-title: "item 2"]} 
    }, 
    { 
     title: "Dynamic Group Header - 2", 
     items: {[item-title: "item 3", item-title: "item 4"]} 
    } 
    ]; 

在哪裏每個手風琴身體看起來像這樣： -

<div ng-repeat="item in group[n].items"><li>{{item.item-title}}</li></div> 

這樣，結果HTML看起來像這樣： -

Dynamic Group Header - 1 
. item 1 
. item 2 
Dynamic Group Header - 2 
. item 3 
. item 4 

任何我放在內容下似乎只是實例化爲innerHtml沒有任何處理。

Answer 1

我不知道我完全得到了你的使用情況，但假設你要不斷的重複項目手風琴的身體裏面，你可以簡單地做它像這樣（標記）：

<accordion> 
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups"> 
     <ul> 
     <li ng-repeat="item in group.items">{{item['item-title']}}</li> 
     </ul> 
    </accordion-group> 
    </accordion> 

當我試着以您的JSON爲例，我注意到它不能很好地合成，因此它可能是您面臨的困難的一部分。以下是更正JSON：

$scope.groups = [ 
    { 
     title: "Dynamic Group Header - 1", 
     items: [{"item-title": "item 1"}, {"item-title": "item 2"}] 
    }, 
    { 
     title: "Dynamic Group Header - 2", 
     items: [{"item-title": "item 3"}, {"item-title": "item 4"}] 
    } 
    ]; 

和工作普拉克：http://plnkr.co/edit/pjaekUXzvMQn9mOOArIH?p=preview