How to get dynamic content in Accularion AngularJS package

Question

I see how to get static content in the body of the accordion, but I can’t figure out how to create dynamic content.

Taking an example at http://angular-ui.imtqy.com/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 to create an accordion from a two-tier structure, so ...

 $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 body of the accordion looks something like this: -

 <div ng-repeat="item in group[n].items"><li>{{item.item-title}}</li></div> 

Thus, the resulting HTML looks something like this: -

 Dynamic Group Header - 1 . item 1 . item 2 Dynamic Group Header - 2 . item 3 . item 4 

Everything I put in the content just seems to get an innerHtml instance without any processing.

Answer 1

I'm not sure I got your use case completely, but assuming you want to repeat elements inside the body of the accordion, you could just do it like this (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 tried to use your JSON as an example, I noticed that it was not well formed, so it may be part of the difficulty you are having. 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 work plan: http://plnkr.co/edit/pjaekUXzvMQn9mOOArIH?p=preview