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

如何在AngularJS Accordion主体中获取动态内容

1 个答案: