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

发布时间：2020-12-17 08:18:00 所属栏目：安全来源：网络整理

导读：我有点新颖，我有我的json和ng重复的问题。我有一个“模块”列表，然后列出其中的“周”： { "modules": { "module1": { "title":"name of module1","description":"description of module1","weeks":{"week1":{"title":"Week 01"} },"module2": { "title":"

我有点新颖，我有我的json和ng重复的问题。我有一个“模块”列表，然后列出其中的“周”：

{
    "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中。

感谢任何帮助。
小号

我会更改你的数据结构，所以你的模块和周是一组对象。

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

json数据：

{
    "modules":
        [
                {
                   "title":"name of module1","weeks":[{"id":1,"title":"Week 01"}]
                },{
                   "title":"name 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.weeks与module.title大致相同。在你的例子中，你正在进行迭代，并试图引用与你的json结构不匹配的ocw.modules.weeks。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!