angularjs uib-tabset not working under ui-bootstrap 2.5.0
Question
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?
1 answers
solution1
2 ACCPTED 2017-08-05 20:37:43
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;
};
Check out in detail in official docs .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.