2013-05-10 18 views
21

ng-yinelemeyi kullanıyorum Açısal olarak biraz yeni ve json ve yinelenmelerimle ilgili sorun yaşıyorum.JSON içeren JSON

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

benim son çıkış bir tablodur ve ben modüller tekrarlamak alabilirsiniz, ama ben zor zamanlar anlayış yaşıyorum: Ben içlerinde "modüllerin" ve "hafta" nin daha sonra listelerin listesi var haftalarca döngü yaparak yanlış yapıyorum. İşte benim şablon:

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

Böylece irade çıkışı 2 tablolar, uygun başlıklar ve açıklamalarla ama haftalar doğru görüntülenmesi için almak gibi olamaz. Bazı "modüllerin" bir "hafta" daha fazla olduğunu unutmayın. Hata şablonumda veya jsonda olup olmadığından emin değilim.

Yardımlarınız için teşekkür ederiz. S

+0

pls keman paylaşan nesne yapısı daha mantıklı sözdizimi hatası –

cevap

37

Veri yapınızı değiştirirsiniz, böylece modülleriniz ve haftalarınız bir dizi nesnedir.

Demo: http://plnkr.co/edit/e41n9vAMMLf0WWIUQ8HO?p=preview

json veriler:

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

Sonra İşaretlemenizin olacaktır:

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

Bu durumda almak için module olan her modül üzerinden yineleme olduğundan haftalar sadece module.weeksmodule.title ile aynıdır. Örneğinizde yineleme içinde ve json yapınızla eşleşmeyen ocw.modules.weeks referans vermeye çalışıyorsunuz.

+0

Ah var görünüyor. Daha temiz ve daha az kafa karıştırıcı. Çok teşekkürler! – Stu

+1

+1, tam bir örnek için – Matsemann

+1

Bu gerçekten yardımcı oldu! Teşekkür! – richfinelli

5

Değişim

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

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

artık kapsamında bir modül var ve peşinde olduğunuz o modülün hafta çünkü hiç.

+0

İşte bu. Yardımın için çok teşekkür ederim! – Stu

2

Tam anlamıyla, tablonuzda bir stil ve thead varsa, bu ngRepeat birden fazla tablo oluşturacaktır, bu bizim istediğimiz değil.

sadece tbody elemanda ilk ng-repeat kullanın Bunu önlemek için:

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