Question

我对角度有点新，而且我的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结构不匹配的{{1}}。

Answer 2

更改

<tr ng-repeat="week in ocw.modules.weeks">

到

<tr ng-repeat="week in module.weeks">

因为你现在在你的范围内有一个模块，而且这个模块就是你要经历的几周。

Answer 3

为了完整起见，如果您的表格有一些样式且thead，则此ngRepeat将创建多个表格，这不是我们想要的。

要避免这种情况，只需使用ng-repeat元素中的第一个tbody：

<table class="table table-bordered">
    <tbody 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>
    </tbody>
</table>

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

3 个答案: