AngularJS Bootstrap-ui tabs to pull in dynamic content

Question

I have set up a Plunker here to demonstrate my app:

http://plnkr.co/edit/iIJVuIxspDRedN7ZXiTK?p=preview

<tabset>
  <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}}</p>
    </div>
  </div>
  <div ng-hide="tabs.isLoaded"><h3>Loading...</h3></div>
  </tab>
</tabset>

What I would like to do is only show the relevant content under each tab, at the moment the way I have set it up is I am pulling in all content in both tabs.

What is the best way to configure this?

Thanks in advance!

squiroid · Accepted Answer · 2015-01-15 18:08:35Z

2

Change this $scope.tabs.content=res.data;

to

$scope.tabs.content=res.data[0].fruit;

Here is updated plunker

http://plnkr.co/edit/5Ng9PHkrluKUSzQhor34?p=preview

answered Jan 15, 2015 at 18:08

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS Bootstrap-ui tabs to pull in dynamic content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related