21

私はAngularが初めてで、jsonとng-repeatに問題があります。「モジュール」のリストと、その中に「週」のリストがあります。

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

4

3 に答える 3

39

モジュールと週がオブジェクトの配列になるように、データ構造を変更します。

デモ: 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 構造と一致しないものを参照しようとしています。

于 2013-05-10T15:34:04.437 に答える
4

変化する

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

に

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

スコープにモジュールがあり、そのモジュールの数週間後だからです。

于 2013-05-10T15:39:51.840 に答える
2

完全を期すために、テーブルに何らかのスタイルと がある場合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>
于 2013-07-29T13:36:58.790 に答える