AngularJS ng-repeat bootstrap-ui選項卡

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重複，並在等級標籤，你只能看到第一組數據和第二個選項卡只能看到第二個數據數組。

<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 content goes here"}，梨選項卡爲{"Pear":"Pear content goes here"}。爲了將其縮小到僅限於該值，您必須爲apple選項卡顯示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」]這樣的東西，它總是會輸出相應的名字。

讓我知道如果您有任何問題。

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> 

這是否給你你正在尋找的結果？