Question

我正在使用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，在Grades选项卡中只能看到第一组数据，而在第二个选项卡中只能看到第二个数据数组。

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

目前，这两组数据都被拉入两个标签页。任何建议将被认真考虑。提前谢谢。

Answer 1

好的，看完你的普兰克后，我理解你的问题。请尝试以下方法：

  <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"}。为了将其缩小到仅限值，您必须为苹果标签显示item.fruit[$parent.$index]["Apple"]以显示此处的Apple内容，并为标签对显示item.fruit[$parent.$index]["Pear"]。但是，这对我们没有帮助，所以我建议重构。

也许更抽象的东西？也许像是......

[
 {
   "fruits":
      [
        {
          "name": "Apple",
          "content" : "content goes here"
        },
        {
          "name": "Pear",
          "content": "pear content goes here"
        }
      ]
 }
]

具有名为＆＃34; fruits＆＃34;的属性的对象。这是一个水果对象数组。每个水果对象都有名称和内容作为键。这样你就可以在ng-repeat中使用item.fruit [$ parent。$ index] [＆＃34; Name＆＃34;]之类的东西，并且它总是会输出相应的名字。

如果您有任何疑问，请与我们联系。

Answer 2

尝试以下方法：

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

这能否为您提供所需的结果？

AngularJS ng-repeat for bootstrap-ui tabs

2 个答案: