À l'aide de ng-repeat sur JSON JSON contenant

Je suis un peu nouveau pour anguleuses, et je vais avoir des problèmes avec mon json et ng-se répète. J'ai une liste de "modules" et ensuite les listes de "semaines" à l'intérieur d'eux:

{
    "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 dernière sortie est un tableau, et je peux obtenir les modules de répéter, mais je vais avoir du mal à comprendre ce que je fais mal en obtenant les semaines à boucle. Voici mon 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>

De telle manière que la sortie 2 tables, avec les bons titres et les descriptions, mais je n'arrive pas à obtenir les semaines pour s'afficher correctement. Notez que certains "modules" plus qu'une "semaine". Je ne suis pas vraiment sûr si l'erreur est dans mon template ou json.

Merci pour toute aide.
S

  • pls partager votre violon comme la structure de l'objet semble avoir erreur de syntaxe
InformationsquelleAutor Stu | 2013-05-10
  1. 39

    Je voudrais changer la structure de données afin que vos modules et les semaines sont 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>

    Que vous êtes une itération sur chaque module qui dans ce cas est module pour obtenir les semaines, il est juste module.weeks la même que module.title. Dans votre exemple, vous êtes à l'intérieur de l'itération et d'essayer de référence ocw.modules.weeks qui ne correspond pas à votre structure json.

    • Ah que c'est plus logique. C'est beaucoup plus propre et moins à confusion. Merci beaucoup!
    • +1 pour une bonne exemple
    • C'était vraiment utile!! Merci!
    • Enfin j'ai trouvé un bon exemple sur la façon appropriée de sortie imbriquée json avec Angularjs. Merci +1
    • Et si j'ai un key qui a un space - t-il?
    • En javascript, vous pouvez faire obj["key with space"]

    InformationsquelleAutor lucuma
  2. 4

    Changement

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

    à 

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

    parce que vous avez maintenant un module à votre portée, et c'est que du module de semaines que vous êtes après.

    • C'est tout. Je vous remercie beaucoup pour votre aide!
    InformationsquelleAutor Matsemann
  3. 2

    Juste par souci d'exhaustivité, si votre table a du style et de la thead, ce ngRepeat va créer plusieurs tables, ce qui n'est pas ce que nous voulons.

    Pour éviter cela, il suffit d'utiliser la première ng-repeat dans un tbody élément:

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