javascript 如何在 AngularJS Accordion 主体中获取动态内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17275762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get dynamic content in an AngularJS Accordion body
提问by pinoyyid
I can see how to get static content in an accordion body, but can't figure out how to generate dynamic content.
我可以看到如何在手风琴主体中获取静态内容，但无法弄清楚如何生成动态内容。
Taking the example at http://angular-ui.github.io/bootstrap/the accordion is generated from ...
以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"
}
];
What I want to achieve is generating an accordion from a two level structure thus ...
我想要实现的是从两层结构生成手风琴，因此......
$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"]}
}
];
Where each accordion body looks something like :-
每个手风琴体看起来像：-
<div ng-repeat="item in group[n].items"><li>{{item.item-title}}</li></div>
Such that the resulting HTML looks something like:-
这样生成的 HTML 看起来像：-
Dynamic Group Header - 1
. item 1
. item 2
Dynamic Group Header - 2
. item 3
. item 4
Anything I put under content simply seems to get instantiated as innerHtml without any processing.
我放在 content 下的任何东西似乎都被实例化为 innerHtml 而没有任何处理。
采纳答案by pkozlowski.opensource
I'm not sure I fully got your use-case but assuming that you want to repeat over items inside accordion's body you could simply do it like so (markup):
我不确定我是否完全了解您的用例，但假设您想重复手风琴体内的项目，您可以简单地这样做（标记）：
<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>
When I was trying to use your JSON as an example I've noticed that it wan't well formated so it might be part of the difficulty you were facing. Here is the corrected JSON:
当我尝试使用您的 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"}]
}
];
and the working plunk: http://plnkr.co/edit/pjaekUXzvMQn9mOOArIH?p=preview
和工作 plunk：http://plnkr.co/edit/pjaekUXzvMQn9mOOArIH? p=preview
