Использование ng-repeat на JSON, содержащем JSON

Я немного новичок в angular, и у меня проблемы с моими 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.

Спасибо за любую помощь. S

Ответы

Ответ 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.

Ответ 2

Изменить

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

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

потому что теперь у вас есть модуль в вашей области действия, и это время, которое вы будете выполнять в течение нескольких недель.

Ответ 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>