JSON이 포함 된 JSON에서 ng-repeat 사용

Question

저는 각도가 약간 새롭고 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 테이블, 적절한 제목과 설명과 함께,하지만 난 몇 주 동안 제대로 표시 얻을 수없는 것. 일부 "모듈"에는 "1 주일"이 더 많습니다. 오류가 내 템플릿 또는 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과 거의 같습니다. 귀하의 예제에서 당신은 반복 내부에 귀하의 json 구조와 일치하지 않는 ocw.modules.weeks을 참조하려고합니다.

Answer 2

변경

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

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

당신은 지금 당신의 범위에서 모듈을 가지고 있고, 당신이 후있어 해당 모듈의 주이기 때문이다.

Answer 3

테이블의 스타일이 thead 인 경우이 ngRepeat은 원하는 테이블이 아닌 여러 테이블을 생성합니다.

그냥 tbody 요소의 첫 번째 ng-repeat를 사용하여이 문제를 방지하려면 :

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