我正在使用angularjs和bootstrap-ui来构建一些选项卡。
我想要两个选项卡：
成绩和入学考试。 我的 JSON 如下所示（如果需要，我可以更改它）：
[
{
"name":"University of Aberdeen",
"sections": [
{
"title": "Grades",
"data" : [
{
"heading": "GCE - AS Levels",
"paragraph": "Do not currently form part of academic requirement. AS module resits are permitted providing the final three A levels are undertaken simultaneously over two years of study. GCSE English and Maths needed at grade C minimum."
},
{
"heading": "Re-application",
"paragraph": "Reapplication is accepted with no disadvantage to the applicant."
}
]
},
{
"title": "Entrance exam",
"data" : [
{
"heading": "GCE - AS Levels",
"paragraph": "Do not currently form part of academic requirement. AS module resits are permitted providing the final three A levels are undertaken simultaneously over two years of study. GCSE English and Maths needed at grade C minimum."
},
{
"heading": "Re-application",
"paragraph": "Reapplication is accepted with no disadvantage to the applicant."
}
]
}
]
}
]
我试图做的是使用 ng-repeat，在"成绩"选项卡中，您只能看到第一组数据，而在第二个选项卡中，您只能看到第二组数据数组。
<tabset type="pills">
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" select="getContent()" active="tab.active" disabled="tab.disabled">
<h1>{{tab.title}}</h1>
<div ng-repeat="item in tabs.content">
<div ng-repeat="item in item.sections">
<div ng-repeat="item in item.data">
<h3>{{item.heading}}</h3>
<p>{{item.paragraph}}</p>
</div>
</div>
</div>
</tab>
</tabset>
目前，这两组数据都被拉入两个选项卡。任何建议将不胜感激。提前谢谢。
好吧，看了你的 Plunkr 后，我明白你的问题了。请尝试以下操作：
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" select="getContent()" active="tab.active" disabled="tab.disabled">
<div ng-hide="!tabs.isLoaded">
<h1>{{tab.title}}</h1>
<div ng-repeat="item in tabs.content">
<p>{{item.fruit[$parent.$index]}}</p>
</div>
</div>
<div ng-hide="tabs.isLoaded"><h3>Loading...</h3></div>
</tab>
此解决方案将在 index = $parent.$index 处显示键值对。这将看起来像：苹果标签{"Apple":"Apple content goes here"}，梨标签{"Pear":"Pear content goes here"}。为了将其缩小到仅值，您必须说苹果选项卡显示Apple内容item.fruit[$parent.$index]["Apple"]在这里，item.fruit[$parent.$index]["Pear"]选项卡对。不过，这对我们没有帮助，所以我建议重构。
也许更抽象的东西？也许像...
[
{
"fruits":
[
{
"name": "Apple",
"content" : "content goes here"
},
{
"name": "Pear",
"content": "pear content goes here"
}
]
}
]
具有名为"水果"的属性的对象，该属性是水果对象的数组。每个水果对象都有名称和内容作为键。这样，您始终可以在ng-repeat中使用类似item.fruit[$parent.$index]["Name"]之类的东西，并且它将始终输出相应的名称。
如果您有任何问题，请告诉我。
尝试以下操作：
<tabset type="pills">
<tab ng-repeat="section in sections"
heading="{{section.title}}"
select="getContent()"
active="tab.active"
disabled="tab.disabled">
<div ng-repeat="class in section.data">
<p>{{class.heading}}</p>
<p>{{class.paragraph}}</p>
</div>
</tab>
</tabset>
这能给你你想要的结果吗？