我正在使用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"}对于Apple标签和{"Pear":"Pear content goes here"}pear标签。为了仅将其范围缩小到该值，您必须说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”]之类的东西，并且它将始终输出相应的名称。
如果您有任何问题，请告诉我。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句