angularJS嵌套ng重复
angularJS nesting ng-repeat
我有以下格式的数据。
[
{
"id": "1",
"quizId": "2",
"question": "What team is Messi playing ?",
"quiz": [
{
"id": "2",
"categoryId": "67",
"name": "Football Quiz",
"quizsize": "0"
}
],
"answerswers": [
{
"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,然后我也试图显示答案.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="answerswer in question.answers">
<td>{{ answer.name}}</td>
</td>
</tr>
</table>
第二个ng重复没有显示任何内容。我还试着回答了[0].name.
根据标准,您当前的HTML无效。
td
元素不能嵌套,您应该使用不同的元素来显示td
内部的内容,如div
或span
标记
<tr ng-repeat="question in questions">
<td>{{ question.question}}</td>
<td>{{ question.quiz[0].name }}</td>
<td ng-repeat="answerswer in question.answers">
<div>{{ answer.name}}</div>
</td>
</tr>
相关文章:
- 角度:在ng重复上切换图像
- AngularJS:ng之后,重复$scope值未按预期更新
- 列出每行2个元素的最佳方式是按角度重复ng
- 访问重复之外的ng重复ng形式
- 将我的列表 vom ng-repeat 更改为收集重复 ng-click 后,无法正常工作
- 如何隐藏 ng 重复 ng 如果
- 在ng中指定变量,重复ng次单击
- 如果else为Angular,则使用ng click函数重复ng
- 选择特定键,然后显示特定值而不重复 ng 重复
- 将数据传递给指令,以便在指令内重复 ng
- 在两行(或更多行)上重复 ng
- 自动返回到结果的第一页,重复 ng
- AngularJS-在一级数组上重复ng的表
- AngularJS未捕获引用错误:ng重复ng单击
- 隐藏基于下拉列表中所选选项的输入值,ng重复ng隐藏
- 如何在Angular模板中设置变量,在第一个元素上重复ng
- 将数组值偏移一个数字,用于在引导程序列上重复ng
- angularjs ng如果不是空的,重复ng
- 使用具有多个重复ng的单选按钮组的ng-model
- 在表中重复ng和条件tr