CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapangular-ui-bootstrapangular-ui-bootstrap-tab
Bonnard
Bonnard

Reputation: 389

angularjs uib-tabset not working under ui-bootstrap 2.5.0

Why this snippet is not working? By clicking on the button, it should switch to the selected tab.
Whereas this example here with different versions of angularjs and bootstrap work:
Link:
angularjs switch tab view using ui.bootstrap

What is the problem in this new version below?

var app = angular.module('app', ['ui.bootstrap']);

app.controller('TabCtrl', function($scope) {
  
$scope.tabs = [{active: true}, {active: false}, {active: false}];
$scope.go_tab1 = function() {
    $scope.tabs[1].active = true;
};
$scope.go_tab2 = function() {
    $scope.tabs[2].active = true;
};

});
   <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular-animate.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>

<body ng-app="app">
 <div ng-controller="TabCtrl">

  <uib-tabset class="tabbable">
        <uib-tab heading="my tab 0" ng-attr-active="tabs[0].active">
            <div class="row">

            <a class="btn btn-wide btn-azure" ng-click="go_tab1()">
            Go To tab 1
            </a>
            <a class="btn btn-wide btn-azure" ng-click="go_tab2()">
            Go To tab 2
            </a>
            </div>
        </uib-tab>
        <uib-tab heading="my tab 1" ng-attr-active="tabs[1].active">
            <div class="row">
            </div>
        </uib-tab>
        <uib-tab heading="my tab 2" ng-attr-active="tabs[2].active">
            <div class="row">
            </div>
        </uib-tab>
    </uib-tabset>
</div>
</body>

However, the same angularjs version works with ui bootrap ui-bootstrap-tpls-0.14.3.js . why is that?

https://jsfiddle.net/234tpk75/2/

Upvotes: 1

Views: 4802

Answers (1)

Shantanu
Shantanu

Reputation: 3513

This's because lot things changed in updated version of ui-bootstrap. That working jsfiddle uses very old version of uib 0.14.3 Many syntax changed since, directives updated. Also, you need tpls version because these directives require template which is available in tpls version of library.

So, in this updated version you can have one variable to store active tab index & then change its value accordingle. So you can have active attribute storing variable of active variable on ui-tabset directive and have index attribute with unique value on each uib-tab.

<uib-tabset class="tabbable" active="activeTab">
  <uib-tab heading="my tab 0" index=0>
    <div class="row">
      <a class="btn btn-wide btn-azure" ng-click="go_tab1()">
        Go To tab 1
        </a>
      <a class="btn btn-wide btn-azure" ng-click="go_tab2()">
        Go To tab 2
        </a>
    </div>
  </uib-tab>
  <uib-tab heading="my tab 1" index=1>
    Tab 1
  </uib-tab>
  <uib-tab heading="my tab 2" index=2>
    Tab 2
  </uib-tab>
</uib-tabset>

And in controller just have:

  $scope.activeTab = 0;
  $scope.go_tab1 = function() {
    $scope.activeTab = 1;
  };
  $scope.go_tab2 = function() {
    $scope.activeTab = 2;
  };

Working plunker

Check out in detail in official docs.

Upvotes: 2

Related Questions