用于 bootstrap-ui 选项卡的 AngularJS ng-repeat

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，在“成绩”选项卡中您只能看到第一组数据，而在第二个选项卡中您只能看到第二个数据数组。

<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

好吧，看了你的 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":"Apple content gone 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"
        }
      ]
 }
]

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

如果您有任何疑问，请告诉我。