Menu
I want to select the last tab, any idea how to do that? Only the tabs inside the ng-repeat are available to select, I won't use a ng-repeat, how can I do it with no ng-repeat?
Here is the working code: http://plnkr.co/edit/ZJNaAVDBrbr1JjooVMFj?p=preview
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsDemoCtrl">
<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>
<button type="button" class="btn btn-default btn-sm" ng-click="tabs[3].active = true">SELECT LAST TAB!!!</button>
</p>
<p>
<button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
</p>
<hr />
<uib-tabset>
<uib-tab heading="Static title">Static content</uib-tab>
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
{{tab.content}}
</uib-tab>
<uib-tab heading="How to select this tab???">nico</uib-tab>
</uib-tabset>
</div>
<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 type="text/javascript">
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',
disabled: true
}];
});
</script>
</body>
</html>
254
All I did was initialize a new object to hold your new tab, and change your reference in the button. It solves your problem but I've no idea if it's your desired architecture.
Here are the highlights:
$scope.separateTab = {
title: 'How to select this tab???',
content: 'Dynamic content 2'
};
<uib-tab heading="{{separateTab.title}}" active="separateTab.active">nico</uib-tab>
<button type="button" class="btn btn-default btn-sm" ng-click="separateTab.active = true">SELECT LAST TAB!!!</button>
Here's the plnkr
175
Here is my code in case someone need some other example:
http://plnkr.co/edit/rBk95jt02AvE78GlGLzu?p=preview
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsDemoCtrl">
<p>Select a tab by setting active binding to true:</p>
<p>
<button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].active = true">SELECT SECOND TAB!!!</button>
</p>
<hr />
<uib-tabset>
<uib-tab heading="First" active="tabs[0].active">{{tabs[0].text}}</uib-tab>
<uib-tab heading="Second" active="tabs[1].active">Second</uib-tab>
</uib-tabset>
</div>
<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 type="text/javascript">
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope, $window) {
$scope.tabs = [{text:"First Text"}, {},{},{}];
});
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With