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

Question

我對angular有點新，而且我的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中。

感謝您的任何幫助。 S

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結構。

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>