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

我放在 content 下的任何内容似乎都被实例化为 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