javascript - How do I get dynamic content in an AngularJS Accordion body - Stack Overflow

admin管理员组

文章数量:1384613

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 / the accordion is generated from ...

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

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.

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

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

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.

• javascript
• angularjs
• angular-ui-bootstrap

Share Improve this question Follow edited Jun 24, 2013 at 15:26 pkozlowski.opensource 117k6060 gold badges328328 silver badges286286 bronze badges asked Jun 24, 2013 at 12:42 pinoyyidpinoyyid 22.4k1717 gold badges7575 silver badges124124 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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:

  $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

本文标签： javascriptHow do I get dynamic content in an AngularJS Accordion bodyStack Overflow