含JSON JSON采用NG-重复 [英] Using ng-repeat on JSON containing JSON

问题描述

我有点新的角度，我有我的JSON和NG-重复的问题。我在其中的模块，然后的周名单列表：

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.

感谢您的帮助。
小号

Thanks for any help. S

推荐答案

我就这么你的模块和周是对象的数组改变你的数据结构。

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

演示：<一href=\"http://plnkr.co/edit/e41n9vAMMLf0WWIUQ8HO?p=$p$pview\">http://plnkr.co/edit/e41n9vAMMLf0WWIUQ8HO?p=$p$pview

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

然后你的标记是：

And then your markup would be:

<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 。在你的榜样，你是迭代里面，并试图引用 ocw.modules.weeks 这不符合您的JSON结构。

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-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！