How can I render html content in angularjs tabset?

Question

I am a rookie in angularjs. I'm currently working on a page where i should display various forms inside tabs.I've worked on a code which activates the other tab on a button click.Heres the html

<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div ng-controller="TabsDemoCtrl">
        <uib-tabset vertical="true" type="pills">
            <p>Select a tab by setting active binding to true:</p>
            <p>
                <button type="button" class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
                <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
            </p>
            <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active ="tab.active" disable="tab.disabled">
                {{tab.content}}
            </uib-tab>
        </uib-tabset>
        <hr />
    </div>
</body>
</html>

and here's the controller.js

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {
    $scope.tabs = [
        { title:'Dynamic Title 1', content:'Dynamic content 1' },
        { title:'Dynamic Title 2', content:'Dynamic content 2'}
    ];
});

here's the plunker link..http://plnkr.co/edit/v23qWGzqbw3Y5o51KhHf?p=preview

what i need is to get the buttons inside the 'dynamic content' i.e when we click the button in tab1 content,it activates the other tab. I also have to include much other html elements too. What are the methods in which i can achieve this?

antonama · Accepted Answer · 2015-11-06 11:41:13Z

1

Please take a look at https://docs.angularjs.org/api/ng/directive/ngInclude.

In "tab.content" you should have template urls, and use them like it is described in angular docs.

  <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active ="tab.active" disable="tab.disabled">
      <div ng-include="tab.content"></div>
  </uib-tab>

answered Nov 6, 2015 at 11:41

antonama

1229 bronze badges

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

Comments

Partha Sarathi Ghosh · Accepted Answer · 2015-11-06 11:47:51Z

1

Use the following code

<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
      {{tab.content}}
      <button type="button" class="btn btn-default btn-sm" ng-click="$parent.tabs[($index+1)%2].active = true">Toggle tab</button>
    </uib-tab>

You can take this button either start of the content or end of the content. But not in middle using this approach.

answered Nov 6, 2015 at 11:47

Partha Sarathi Ghosh

11.7k22 gold badges64 silver badges84 bronze badges

Comments

Jean-Claude Pratt-Delzenne · Accepted Answer · 2015-11-06 11:21:29Z

0

For the tabs you can use ng-show directive,

<li ng-show="myScopeVar == 1">ALl your html here or use a directive</li>
<li ng-show="myScopeVar == 2">ALl your html here or use a directive</li>
<li ng-show="myScopeVar == 3">ALl your html here or use a directive</li>

if the $scope.myScopeVar == 2 then only the second li will be visible, the others will be invisible.

answered Nov 6, 2015 at 11:21

Jean-Claude Pratt-Delzenne

4511 gold badge3 silver badges12 bronze badges

Comments

Kais · Accepted Answer · 2015-11-06 13:21:13Z

0

In order to active another tab from current tab:You can try this:

<tabset>
 <tab heading="First" ng-attr-active="firtTab">
 <button ng-click="gotonext()">Go Next Tab</button>
</tab>
 <tab heading="Second" ng-attr-active="secondTab">Content2</tab>
</tabset>


$scope.firstTab = true;
$scope.secondTab = false;

$scope.gotonext= function(){
$scope.firstTab = false;
$scope.secondTab = true;
}

answered Nov 6, 2015 at 13:21

Kais

2,0083 gold badges24 silver badges35 bronze badges

Collectives™ on Stack Overflow

How can I render html content in angularjs tabset?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related