How to Select a Tab in angular-ui? (AngularJS)

Question

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>

You're not adding that tab to the tabs collection..Should it be added? Or should it be separate? — Mark C.
– Mark C., Commented Jan 4, 2016 at 20:43
Hi! I like it separate. I don't want to use a ng-repeat, Thanks! — lito
– lito, Commented Jan 4, 2016 at 20:47

lito · Accepted Answer · 2016-01-04 21:17:22Z

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>

Mark C. · Accepted Answer · 2016-01-04 20:51:53Z

3

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

answered Jan 4, 2016 at 20:51

Mark C.

6,5004 gold badges39 silver badges74 bronze badges

2 Comments

lito Over a year ago

yes, Thanks! That will do the job, I was trying to use ng-model but seems it is easier than that. Do you think there is any way to avoid creating an object "$scope.separateTab = {};" in the controller?

Mark C. Over a year ago

How should it be driven? We are getting beyond the scope of the question I think but I've no idea how you're loading your data. tabs can be an object with arrays of different tabs. But I've no idea how to answer your question without more info.

aman · Accepted Answer · 2019-05-31 16:05:54Z

1

This is one way to attain it.

<uib-tabset ng-init="active=1" active="active">
   <uib-tab index="1">Tab content</uib-tab>
   <uib-tab index="2">Tab content</uib-tab>
   <uib-tab index="3">Tab content</uib-tab>
   <uib-tab index="4">Tab content</uib-tab>
</uib-tabset>

NOW change the value of $scope.active in javascript or script section and the active tabs will change.Index value should be different for each tab.

edited May 31, 2019 at 16:05

answered Mar 29, 2019 at 13:26

aman

779 bronze badges

Comments

Pankaj Kumar Dewangan · Accepted Answer · 2016-12-13 10:05:30Z

0

One way to achieve is to set the active attribute of uib-tab, something like this:

<uib-tabset active="activeForm">

(https://plnkr.co/edit/Yn4YomuwDfTmBU3J8yl1?p=preview)

edited Dec 13, 2016 at 10:05

answered Dec 13, 2016 at 9:54

Pankaj Kumar Dewangan

11 bronze badge

Collectives™ on Stack Overflow

How to Select a Tab in angular-ui? (AngularJS)

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related