4

我可以看到如何在手风琴正文中获取静态内容，但不知道如何生成动态内容。

以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 而无需任何处理。

4

1 回答 1

3

我不确定我是否完全了解您的用例，但假设您想重复手风琴体内的项目，您可以简单地这样做（标记）：

  <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"}]
    }
  ];

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

于 2013-06-24T13:10:40.200 回答