在包含JSON的JSON上使用ng-repeat

Question

我对angular有点陌生，我的json和ng-repeats遇到了问题。我有一个“模块”列表，然后是其中的“周”列表：

{
    "modules":
        {
            "module1":
                {
                   "title":"name of module1",
                   "description":"description of module1",
                   "weeks":{"week1":{"title":"Week 01"}
                },
            "module2":
                {
                   "title":"name of module2",
                   "description":"description of module2",
                   "weeks":{"week2":{"title":"Week 02"},"week3":{"title":"Week 03"}
                }
        }
}

我的最终输出是一张表，我可以让模块重复，但是要让几周循环，我很难理解自己在做什么。这是我的模板：

<table class="table table-bordered" ng-repeat="module in ocw.modules">
<tr>
    <td>
        <h3 class="moduletitle">{{ module.title }}</h3>
        <h4>Description</h4>
        <p>{{ module.description }}</p>
    </td>
</tr>
<tr ng-repeat="week in ocw.modules.weeks">
    <td>
        {{ week.title }}
    </td>
</tr>
</table>

这样将输出2个表，并带有正确的标题和描述，但是我似乎无法正确显示几周。请注意，某些“模块”有一个以上的“星期”。我不确定错误是否在模板或json中。

谢谢你的帮助。小号

Answer 1

我会更改您的数据结构，以便您的模块和星期是一组对象。

演示：http：//plnkr.co/edit/e41n9vAMMLf0WWIUQ8HO？p
= preview

json数据：

{
    "modules":
        [
                {
                   "title":"name of module1",
                   "description":"description of module1",
                   "weeks":[{"id":1, "title":"Week 01"}]
                },

                {
                   "title":"name of module2",
                   "description":"description of module2",
                   "weeks":[{"id":2, "title":"Week 02"},{"id":3,"title":"Week 03"}]
                }
        ]
}

然后您的标记将是：

<table class="table table-bordered" ng-repeat="module in ocw.modules">
<tr>
    <td>
        <h3 class="moduletitle">{{ module.title }}</h3>
        <h4>Description</h4>
        <p>{{ module.description }}</p>
    </td>
</tr>
<tr ng-repeat="week in module.weeks">
    <td>
        {{ week.title }}
    </td>
</tr>
</table>

当您遍历每个模块（在这种情况下module要module.weeks花费数周）时，它与几乎相同module.title。在您的示例中，您位于迭代内部，并尝试引用ocw.modules.weeks与您的json结构不匹配的内容。