AngularJS ng-repeat for bootstrap-ui tabs

Question

I'm using angularjs and bootstrap-ui to build some tab.

I want two tabs:

Grades and Entrance exam. My JSON looks like this (I can change this if I need to):

[
      {
        "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."
              }
            ]
          }
        ]
      }

]

What I'm trying to do is use ng-repeat and in the Grades tab you only see the first set of data and in the second tab you only see the second data array.

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

Currently both sets of data are being pulled into both tabs. Any advice will be appreciated. Thanks in advance.

Patrick Motard · Accepted Answer · 2015-01-16 00:00:22Z

Alright, after looking at your Plunkr I understand your problem. Try the following:

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

This solution will display the key-value pair at index = $parent.$index. This will look like: {"Apple":"Apple content goes here"} for the apple tab and {"Pear":"Pear content goes here"} for the pear tab. In order to narrow it down to the value only, you'll have to say item.fruit[$parent.$index]["Apple"] for the apple tab to display Apple content goes here, and item.fruit[$parent.$index]["Pear"] for the tab pair. That's not going to help us though, so I recommend refactoring.

Maybe something more abstract? Maybe something like...

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

An object that has a property called "fruits" that is an array of fruit objects. Each fruit object has name and content as keys. This way you can always use something like item.fruit[$parent.$index]["Name"] in an ng-repeat and it'll always output the corresponding name.

Let me know if you have any questions.

Patrick Motard · Accepted Answer · 2015-01-15 00:33:37Z

1

Try the following:

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

Does this give you the result you're looking for?

answered Jan 15, 2015 at 0:33

Patrick Motard

2,6602 gold badges16 silver badges23 bronze badges

3 Comments

Pianoc Over a year ago

Thanks Patrick but unfortunately not. I know it would be easier to identify if I set up a fiddle, will try do that when I get a chance.

Patrick Motard Over a year ago

Alright I'll try to keep an eye on this page and wait for the fiddle.

Pianoc Over a year ago

Hi Patrick, here is a Plunker to simplify this: plnkr.co/edit/iIJVuIxspDRedN7ZXiTK?p=preview

Collectives™ on Stack Overflow

AngularJS ng-repeat for bootstrap-ui tabs

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related