angular load ui-bootstrap tabbed content dynamically

Question

I am using angular ui-bootstrap tabs for developing tabs. But how I load tabbed data dynamically after each tab click.

I am able to load the static content. But I want to load data dynamically from ajax. Each tab containing different HTML files.

controller

  $scope.customerInfoTabs = 
           {  
              "General":[  
                 "General",
                 "Employment",
                 "Relationship Status",
              ],
              "Identification":[]                
           }
$scope.customerInfo = $scope.customerInfoTabs['General'];

template

<div class="well">            
            <div class="tabbable">
              <ul class="nav nav-tabs">                               
                <li ng-class="{'active': $index == 0}" ng-repeat="infotabs in customerInfo"><a showtab="" href= data-toggle="tab" ng-click="">{{infotabs}}</a></li>              
              </ul>
              <div class="tab-content">                
                <div class="tab-pane active" id="tab1">
                  <p>I'm in Section 1.</p>
                </div>
                <div class="tab-pane" id="tab2">
                  <p>Howdy, I'm in Section 2.</p>
                </div>
                <div class="tab-pane" id="tab3">
                  <p>Howdy, I'm in Section 3.</p>
                </div>
              </div>
            </div>
        </div>

Obaid · Accepted Answer · 2015-09-01 06:30:56Z

1

If you want to show dynamic content for each tab you will need to use $http service to fetch the html, then bind it using ngBindHtml.

Here is how:

<tabset>
   <tab ng-repeat="tab in tabs" heading="{{tab.title}}"  select="loadData()">
      <div ng-bind-html="tabDynamicContent"></div>
   </tab>
</tabset>

The above example is a simplification where all the tabs will have the same html. Also make sure you include the ngSanitize module.

Here is the plunkr: http://plnkr.co/edit/Yege43KerzfFKE8k5OGc?p=preview

answered Sep 1, 2015 at 6:30

Obaid

1,44521 silver badges38 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:07:17Z

0

I think this question was answer by this stackoverflow: first link or second link

So you could use a tab set in order to do the work you need.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Sep 1, 2015 at 6:02

Radu

1,06612 silver badges37 bronze badges

Collectives™ on Stack Overflow

angular load ui-bootstrap tabbed content dynamically

controller

template

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

controller

template

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related