angularJS嵌套ng-repeat

Question

我有以下格式的數據。

[ 
    { 
    "id": "1", 
    "quizId": "2", 
    "question": "What team is Messi playing ?", 
    "quiz": [ 
     { 
     "id": "2", 
     "categoryId": "67", 
     "name": "Football Quiz", 
     "quizsize": "0" 
     } 
    ], 
    "answers": [ 
     { 
     "id": "1", 
     "questionId": "1", 
     "name": "Barcelona", 
     "correct": "1" 
     }, 
     { 
     "id": "2", 
     "questionId": "1", 
     "name": "M.City", 
     "correct": "0" 
     }, 
     { 
     "id": "3", 
     "questionId": "1", 
     "name": "Real Madrid", 
     "correct": "0" 
     }, 
     { 
     "id": "4", 
     "questionId": "1", 
     "name": "Liverpool", 
     "correct": "0" 
     } 
    ] 
    } 
] 

我試圖在表中顯示它。 每個問題（根）是一個行，爲一個td我得到了quiz.name，然後我試圖顯示answers.name以及。

<table class="table table-striped"> 
    <tr> 
     <th>Title</th> 
     <th>Category</th> 
     <th>Answer 1</th> 
     <th>Answer 2</th> 
     <th>Answer 3</th> 
     <th>Answer 4</th> 

    </tr> 
    <tr ng-repeat="question in questions"> 
     <td>{{ question.question}}</td>  
     <td>{{ question.quiz[0].name }}</td> 
     <td ng-repeat="answer in question.answers"> 
      <td>{{ answer.name}}</td> 
     </td> 
    </tr> 
</table> 

第二個ng-repeat不顯示任何內容。 我也試過答[0] .name。

Answer 1

您當前的HTML根據標準無效。

td元件不能嵌套，應該使用不同的元件，以內部td像div或span

標記

<tr ng-repeat="question in questions"> 
    <td>{{ question.question}}</td>  
    <td>{{ question.quiz[0].name }}</td> 
    <td ng-repeat="answer in question.answers"> 
     <div>{{ answer.name}}</div> 
    </td> 
</tr>