AngularJS ng-repeat bootstrap-ui 选项卡

Question

我正在使用 angularjs 和 bootstrap-ui 来创建 uild 一些标签。

我想要两个标签：

成绩和入学考试。我的 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

尝试以下操作：

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

这是否给了您想要的结果？

Answer 2

好的，看了你的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"
        }
      ]
 }
]

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

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

AngularJS ng-repeat bootstrap-ui 选项卡

AngularJS ng-repeat for bootstrap-ui tabs

twitter-bootstrap

angularjs