Create a new tab that is active and use ng-repeat in the uib-tab directive

Question

Create a new tab that is active and use ng-repeat in the uib-tab directive

I've been trying to solve this problem for a while now. I came across a similar post, but it was left unanswered. So, I decided to create my own post with a Plunkr example.

The issue I'm facing is that upon loading, the ui-tab always defaults to the Add Tab button. What I actually want is for the first element in the ui-tab ng-repeat to be active instead of the static Add Tab button.

<uib-tabset active="activeTabIndex">
  <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}">Some content</uib-tab>
  <uib-tab heading="Add a tab" ng-click="addTab()" >Add a tab</uib-tab>
 </uib-tabset>

https://plnkr.co/edit/XrYSKLdyN1cegfcdjmkz?p=preview

Could anyone provide guidance on how to achieve this? I've been stuck on this issue for some time and would appreciate any help.

Thank you,

javascript angularjs angular-ui-bootstrap angular-ui-tabset

Answer 1

Answer №1

Perhaps you will find this updated plunker of interest,

A bit complex but worth it to create your own directive instead of using an additional <uib-tab>.

Here is a snippet of the code:

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
  <script type="text/javascript">
    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope, $window, $timeout) {

      $scope.tabs = [{
        title: 'Tab1',
        content: 'content1'
      }, {
        title: 'Tab2',
        content: 'content2'
      }];
      $scope.activeTabIndex = 0;//$scope.tabs.length - 1;

      $scope.addTab = function() {
        var newTab = {
          title: 'Tab ' + ($scope.tabs.length + 1),
          content: 'content ' + ($scope.tabs.length + 1)
        };
        $scope.tabs.push(newTab);
        $timeout(function() {
          $scope.activeTabIndex = ($scope.tabs.length - 1);
        });
        console.log($scope.activeTabIndex);
      };
    });
    angular.module('ui.bootstrap.demo').directive('uibTabButton', function() {
      return {
        restrict: 'EA',
        scope: {
          handler: '&',
          text:'@'
        },
        template: '<li class="uib-tab nav-item">' +
          '<a href="javascript:;" ng-click="handler()" class="nav-link" ng-bind="text"></a>' +
          '</li>',
        replace: true
      }
    });
  </script>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div ng-controller="TabsDemoCtrl">

    Active index: {{ activeTabIndex }}
    <br /> Tab count: {{ tabs.length }}
    <br />

    <input type="button" value="Add Tab" ng-click="addTab()" />

    <uib-tabset active="activeTabIndex">
      <uib-tab active="activeTabIndex==$index" ng-repeat="tab in tabs" heading="{{tab.title}}">{{tab.content}}</uib-tab>
      <uib-tab-button handler="addTab()" text="Add a tab"></uib-tab-button>
    </uib-tabset>
  </div>
</body>

</html>

Answer 2

Perhaps you will find this updated plunker of interest,

A bit complex but worth it to create your own directive instead of using an additional <uib-tab>.

Here is a snippet of the code:

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
  <script type="text/javascript">
    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope, $window, $timeout) {

      $scope.tabs = [{
        title: 'Tab1',
        content: 'content1'
      }, {
        title: 'Tab2',
        content: 'content2'
      }];
      $scope.activeTabIndex = 0;//$scope.tabs.length - 1;

      $scope.addTab = function() {
        var newTab = {
          title: 'Tab ' + ($scope.tabs.length + 1),
          content: 'content ' + ($scope.tabs.length + 1)
        };
        $scope.tabs.push(newTab);
        $timeout(function() {
          $scope.activeTabIndex = ($scope.tabs.length - 1);
        });
        console.log($scope.activeTabIndex);
      };
    });
    angular.module('ui.bootstrap.demo').directive('uibTabButton', function() {
      return {
        restrict: 'EA',
        scope: {
          handler: '&',
          text:'@'
        },
        template: '<li class="uib-tab nav-item">' +
          '<a href="javascript:;" ng-click="handler()" class="nav-link" ng-bind="text"></a>' +
          '</li>',
        replace: true
      }
    });
  </script>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div ng-controller="TabsDemoCtrl">

    Active index: {{ activeTabIndex }}
    <br /> Tab count: {{ tabs.length }}
    <br />

    <input type="button" value="Add Tab" ng-click="addTab()" />

    <uib-tabset active="activeTabIndex">
      <uib-tab active="activeTabIndex==$index" ng-repeat="tab in tabs" heading="{{tab.title}}">{{tab.content}}</uib-tab>
      <uib-tab-button handler="addTab()" text="Add a tab"></uib-tab-button>
    </uib-tabset>
  </div>
</body>

</html>

Create a new tab that is active and use ng-repeat in the uib-tab directive

Answer №1

Similar questions

What are the steps to launch an Angular.js application?

Tips for creating 2 fetch methods for a contact API and a Message API in ReactJS!

Implementing a dynamic table filter for every column using AngularJS

What is the best way to transfer Kendo Grid row data to a Kendo popup window within a partial view using jQuery?

Tribal Code Typescript Compiler

Having trouble exporting an object from a different JavaScript file in Node.js

How come (23 == true) is incorrect but (!!23 == true) is correct? After all, there is === for exact comparisons

Tips on concealing confidential keys within a React.js application on the frontend aspect

Choosing a dynamic dropdown option using jQuery and AJAX

The service did not update the returned variable

Arrows indicating the direction of a LineString feature in Openlayers 4

Ways to tidy HTML/XML code?

Having trouble with the "next" pagination button not loading cards, even though the numbered buttons are working perfectly

unable to display loading image prior to upload

Exploring the integration of methods in Vue.js components

Troubleshooting Firebase AppCheck v8 in React: Encountering a 400 error message stating "App ID is Invalid: 'undefined'"

Sharing and showcasing files directly from a local directory

Lagging speeds in client-side template rendering using Rivets.js

When trying to insert a string variable using Node and mysql, the operation fails

Guide to extracting information from a Node.js http get call