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

Question

我可以看到如何在 Accordion 主体中获取静态内容，但无法弄清楚如何生成动态内容。

以 http://angular-ui.github.io/bootstrap/ 为例 Accordion 是从...生成的

$scope.groups = [
    {
      title: "Dynamic Group Header - 1",
      content: "Dynamic Group Body - 1"
    },
    {
      title: "Dynamic Group Header - 2",
      content: "Dynamic Group Body - 2"
    }
  ];

我想要实现的是从两级结构生成 Accordion ，因此......

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

每个 Accordion 主体看起来像:-

<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>
    <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