在包含 JSON 的 JSON 上使用 ng-repeat [英] Using ng-repeat on JSON containing JSON

问题描述

我对 angular 有点陌生，我的 json 和 ng-repeat 有问题.我有一个模块"列表，然后是其中的周"列表:

I'm somewhat new to angular, and i'm having problems with my json and ng-repeats. I have a list of "modules" and then lists of "weeks" within them:

{
    "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"}
                }
        }
}

我的最终输出是一张表格，我可以让模块重复，但我很难通过让几周循环来理解我做错了什么.这是我的模板:

my final output is a table, and I can get the modules to repeat, but I'm having a hard time understanding what I'm doing wrong by getting the weeks to loop. Here is my template:

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

So that will output 2 tables, with the proper titles and descriptions, but I can't seem to get the weeks to display correctly. Note that some "modules" have more that one "week". I'm not really sure if the error is in my template or json.

感谢您的帮助.

推荐答案

我会改变你的数据结构，让你的模块和周成为一个对象数组.

I would change your data structure so your modules and weeks are an array of objects.

演示: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 大致相同.在您的示例中，您在迭代中并尝试引用与您的 json 结构不匹配的 ocw.modules.weeks.

As you are iterating over each module which in this case is module to get the weeks it is just module.weeks much the same as module.title. In your example you are inside the iteration and trying to reference ocw.modules.weeks which doesn't match your json structure.

这篇关于在包含 JSON 的 JSON 上使用 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！