Question

您好我对AngularJS相对较新，我正在创建一个手风琴菜单。我使用了角度UI团队提供的模板，并希望对其进行调整。在我的一个$ scope属性中，我有一个名为groups的变量，它是一个包含title元素和content元素的项数组，它是一个字符串数组。我使用ng-repeat循环遍历每个的标题和内容，但是我实现了第二个ng-repeat指令，因为我希望内容数组中的字符串采用列表的形式。这第二个ng-repeat指令给了我一些问题，因为当我用一组标题/内容测试它时，我得到了预期的结果，但是当有多个项目（在手风琴菜单上基本上有更多的标签）时，它并没有。工作。这很可能是我的代码中的一个小错误。这是我在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']
}

];

这是我的HTML：

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

这只是有bug的代码的一小部分。同样，它是有效的，例如，只有组数组中的第一个项目在代码中，但是一旦我向groups数组添加更多项目，它就会崩溃。提前感谢您的帮助。

Answer 1

很可能是由于重复项目，使用跟踪

<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

我测试过了，你可能忘记了： accordion标记。工作手风琴代码如下：

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

以下是工作plunker

的链接

AngularJS ng-repeat指令

2 个答案: