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,

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

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

I have a question about deploying my Angular.js app - I tried using Heroku but encountered an error. Any suggestions on the best platform to use? UPDATE I'm attempting to deploy my Angular.js app on Heroku as a Node.js application, but it's no ...

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

I am just starting to learn reactjs and have been able to successfully map data from a JSON API. My goal now is to ensure that when a number is saved in the contact list, it should also display the name in the message list. To achieve this, I plan to creat ...

Implementing a dynamic table filter for every column using AngularJS

I have been working on a project to create a custom directive that generates a table with dynamic data and allows for sorting of columns. While the sorting function works as intended, I now want to implement filtering on all columns without specifying a sp ...

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

I am currently facing a challenge in passing the row data from the Kendo Grid to a partial view that is displayed through a Kendo popup window. Within the partial view, users have the option to upload an image file related to the specific row record. This ...

Tribal Code Typescript Compiler

Typescript is a great alternative to Javascript in my opinion, but it bothers me that it requires node.js as a dependency. Additionally, I find it frustrating that there seems to be only one compiler available for this language, and it's self-hosted. ...

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

I have been attempting to make the getCurrentSongData function retrieve the songdata object passed in from the scraper. However, I am encountering the following output: ******************TESTING**************** c:\Users\(PATH TO PROJECT FOLDER)& ...

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

The question boils down to this: are both 23 and true truthy values? If so, shouldn't they be equal under the loose comparison operator ==? However, there is also the strict comparison operator === for cases where precise equality is required. UPDATE ...

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

Desperate times call for desperate measures - I am attempting to conceal a secret key within my React frontend application. While I understand the risks involved, I feel compelled to do so without any other viable options. The reason behind my actions is ...

Choosing a dynamic dropdown option using jQuery and AJAX

I am facing an issue with a select box that is dynamically populated and should display information about a single option. The problem I am encountering is that the browser does not trigger a ':selected' event when I click on any of the options. ...

The service did not update the returned variable

I have been following this specific style guide when writing my Angular code: https://github.com/johnpapa/angularjs-styleguide The guide recommends structuring services like this: /* recommended */ function dataService() { var someValue = '&apo ...

Arrows indicating the direction of a LineString feature in Openlayers 4

I'm attempting to create a LineString with arrows at the end of each line to indicate the direction of the route. I found an example on the official site: The example code in the link creates arrows through user drawing, but I need arrows for a give ...

Ways to tidy HTML/XML code?

Upon receiving a web service response, the data appears as such: <text>&lt;span class="TitleServiceChange" &gt;Service Change&lt;/span&gt; &lt;span class="DateStyle"&gt; &amp;nbsp;Poste ...

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

My pagination numbers are functioning correctly, but I'm having trouble with my "next" or "previous" buttons. I am using Bootstrap 5 and jQuery to load cards from an array. The issue seems to be with the currentPage variable in my displayList function ...

unable to display loading image prior to upload

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en"> <head> <title>Unique Prints</title> <meta charset="utf-8"> <meta name="viewport" conte ...

Exploring the integration of methods in Vue.js components

Within my Vuejs project, I developed a new form component and integrated it into the main index component. This new component needs to validate certain fields, with validation methods already created in the parent component. However, I am facing difficulti ...

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

I've been attempting to integrate appCheck into my Firebase project. Despite following the instructions in the Firebase documentation and consulting several StackOverflow posts, I'm encountering difficulties getting it to function correctly. When ...

Sharing and showcasing files directly from a local directory

Recently diving into NodeJS and web development, I've successfully used multer to upload a single file within my web application. The file gets uploaded to my "uploads" folder flawlessly, and now I'm planning on storing the file path in my databa ...

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

I have a function that renders an array of around 1000 objects, but the html bindings are causing significant performance issues. It currently takes about 5 seconds to complete rivets.bind(). Does anyone have any recommendations for improving performance? ...

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

My attempt to add a string variable into the database is causing an issue. The boolean and integer values insert without any problems, but I keep receiving the following error message: Error: column "spike" does not exist (The value "spike" corresponds ...

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

I am currently working on a function to handle http get requests, but I keep running into issues where my data seems to disappear. Since I am relatively new to Node.js, I would greatly appreciate any assistance. function fetchData(){ var http = requir ...