web-dev-qa-db-fra.com

Utilisation de ng-repeat sur JSON contenant JSON

Je suis un peu nouveau pour angulaire, et j'ai des problèmes avec mes répétitions json et ng. J'ai une liste de "modules" puis des listes de "semaines" en leur sein:

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

ma sortie finale est un tableau, et je peux faire répéter les modules, mais j'ai du mal à comprendre ce que je fais mal en faisant boucler les semaines. Voici mon modèle:

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

Cela produira donc 2 tableaux, avec les titres et descriptions appropriés, mais je n'arrive pas à obtenir les semaines pour s'afficher correctement. Notez que certains "modules" ont plus d'une "semaine". Je ne sais pas vraiment si l'erreur est dans mon modèle ou json.

Merci pour toute aide. S

angularjsangularjs-ng-repeat
21
Stu

Je changerais votre structure de données pour que vos modules et semaines soient un tableau d'objets.

Démo: http://plnkr.co/edit/e41n9vAMMLf0WWIUQ8HO?p=preview

données 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"}]
                }
        ]
}

Et puis votre balisage serait:

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

Comme vous parcourez chaque module qui dans ce cas est module pour obtenir les semaines, c'est juste module.weeks un peu comme module.title. Dans votre exemple, vous êtes dans l'itération et essayez de référencer ocw.modules.weeks qui ne correspond pas à votre structure json.

39
lucuma

Changement

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

à

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

parce que vous avez maintenant un module dans votre portée, et ce sont les semaines de ce module que vous recherchez.

4
Matsemann

Par souci d'exhaustivité, si votre table a du style et thead, cette ngRepeat créera plusieurs tables, ce qui n'est pas ce que nous voulons.

Pour éviter cela, utilisez simplement le premier ng-repeat dans un élément 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>
2
rogeriopvl