如何在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