AngularJS ng-repeat指令

Question

Hi I'm relatively new to AngularJS and I am creating an accordion menu. I used a template provided by the angular UI team and wanted to make a tweak to it. In one of my $scope attributes I have a variable called groups which is an array of items containing a title element and a content element, which is an array of strings. I use ng-repeat to cycle through the titles and content of each, however I implement a second ng-repeat directive because I want the strings in the content array to be in the form of the list. This second ng-repeat directive is giving me issues, because when I test it with only one set of title/content I get the expected result, but when there are multiple items (essentially more tabs on the accordion menu) it doesn't work. This is most likely a minor error in my code. This is my module code in JS:

$scope.groups = [
{
  title: 'Title 1',
  content: ['a','b','c','d'],
}
{
  title: 'Title 2',
  content: ['a','b','c','d']
},
{
  title: 'Title 3',
  content: ['a','b','c','d']
},
{
  title: 'Title 4'
  content: ['a','b','c','d']
}

];

And this is my html:

<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
    <ul>
        <li ng-repeat="item in group.content">{{ item }}</li>
    </ul>
</accordion-group>

This is just a small part of the code that has the bug. Again, it works if, for example, only the first item on the groups array is in the code, but once I add more items to the groups array, it crashes. Thank you ahead of time for any help.

Answer 1

Most likely due to duplicate item, use track by

<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
    <ul>
        <li ng-repeat="item in group.content track by $index">{{ item }}</li>
    </ul>
</accordion-group>

Answer 2

I have tested that and you probably forgot the: accordion tag. The working accordion code looks like:

<accordion close-others="oneAtATime">
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
    <ul>
        <li ng-repeat="item in group.content">{{ item }}</li>
    </ul>
</accordion-group>
  </accordion>

Here is a link to working plunker