Utilizing ng-repeat in a tabset to create an interactive and customizable tab interface

I am using angular ui tab (angular-ui.github.io/bootstrap/) and I expected that with ng-repeat, I would be able to make it dynamic, meaning the user can add tabs. However, unexpectedly it duplicates the tabs.

Here is a demo: http://plnkr.co/edit/iHi1aOfbzsVd1vdX3Tg8?p=preview

The tabs work fine with this code:

<tabset vertical="true">
    <tab heading="{{tab.name}}"><div ng-view></div></tab>
    <tab heading="{{tab.name}}"><div ng-view></div></tab>
  </tabset>

However, when I added ng-repeat="tab in tabs" to the tabset tag and tried to push new tabs into it later on, it failed and duplicated the entire set of tabs.

javascriptangularjstwitter-bootstraptabs

Answer №1

replace the <div ng-view> with 

<div class="mainWrap" ng-view>

Access the example here

<!doctype html>
<html ng-app="daysofme">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.2/angular.min.js"></script>
          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
    <script src="ui-bootstrap.min.js"></script>
    <script src="app.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">

    <link href="bootstrap.css" type="text/css" rel="stylesheet">

  </head>
  <body ng-controller="MainControl">

<div class="mainWrap" ng-view>
  <tabset vertical="true" ng-repeat="tab in tabs">
    <tab heading="{{tab.name}}"></tab>
    <tab heading="{{tab.name}}"></tab>
  </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

Leverage Angular variables within HTML tags

Below is the code in my controller.js file: $scope.animatt = 900; and here is the corresponding html code: <div id="properties" data-{{animatt}}="left:100%;top:10%;"> <h2>all numeric properties</h2> </div> I am t ...

c#angularjsasp.net-mvchtml

Design a unique CSS box using Bootstrap

Hey there! I'm currently working on creating a CSS box with Bootstrap. If you'd like to take a look, feel free to check it out here. I noticed that the padding box isn't affecting the margin-top - any ideas why? Also, I'm trying to ge ...

jqueryhtmlcsstwitter-bootstrap

Learn how to change the input source in Ratchet's chat app to come from a text box on the webpage instead of the console

I followed the guidelines on to create a chat app. However, I now want to input data from a text box instead of using conn.send() in the console. How can I achieve this using php? I was successful in redirecting the sent message to an html element like ...

phpjavascriptjqueryhtmlratchet

Obtain JSON information and integrate it into an HTML document with the help of

I am currently working on a PHP/JSON file named users-json.php. <?php include_once('../functions.php'); if (!empty($_GET['id'])) { $GetID = $_GET['id']; $query = "SELECT Username, Firstname WHERE UserID = :ID"; $stmt = $d ...

javascriptphpjqueryjson

Ensure that newly added elements are aligned with the settings of the slide's

I've encountered an issue with my jQuery slider that affects a div's CSS on slide. Everything works as expected, except when I add a new div, the settings from the slider aren't applied to the new div until the slider is moved again. HTML ...

javascriptjqueryhtmlcss

ReactJS state not being updated due to a nested Axios call

Attempting to fetch data from nested axios calls, successfully retrieving responses from both calls. Struggling to update the prize_pool value within the second axios call. Any assistance would be greatly appreciated. getAllLeague() { axios.get(BA ...

javascriptajaxreactjsasynchronousaxios

Tips for creating a responsive iframe without relying on aspect ratio assumptions

Is there a way to create a responsive iframe without relying on a fixed aspect ratio? The width and height of the content are unknown until rendering. Keep in mind, using Javascript is an option. For instance: <div id="iframe-container"> <i ...

javascripthtmlcssiframeresponsive-design

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

javascripthtmlcssanimation

Is it possible to retrieve any user data by id using Vue 3 Firebase Auth?

I'm a newcomer to vue/firebase and I've been able to easily access the "current user" data from authentication. However, I am struggling to write a JavaScript composable that can retrieve the user object or at least displayName when passing in an ...

javascriptfirebasevue.jsfirebase-authenticationvuejs3

Utilizing Javascript to retrieve the current Controller and Action in Rails

Is it possible for JavaScript to determine the current controller and action in Rails? I had the idea of creating a hidden container to store the current controller and action, but I'm curious if there is a specific JavaScript function for this purpo ...

javascriptjqueryruby-on-railscontrolleraction

Stop processing the current websocket connection once a new websocket request is received

Currently, I am utilizing the npm ws module (or its wrapper named isomorphic-ws) for establishing a websocket connection. NPM Module: isomorphic-ws This setup allows me to retrieve an array of data from a websocket++ server situated on the same local mac ...

javascriptnpmwebsocketws

Tips for overcoming a challenge with a promise of $q

Currently in my AngularJS project, I am utilizing $q for promises and feeling a bit overwhelmed with the usage. How can I resolve this promise-related issue? My goal is to either return the user when isLoggedInPromise() is triggered or provide a response ...

javascriptangularjsparse-platformangular-promise

Uploading and previewing files in Angular

Using the ng-file-upload library, I am able to successfully post files to my backend Web Api. The files are saved in the folder: "~/App_Data/Tmp/FileUploads/" The file path is also stored in my database. When I enter edit mode, I want to display a previ ...

angularjsasp.net-web-aping-file-upload

Validating Credit Card Numbers with Spaces

Currently, I am in the process of creating a credit card form that requires validation using checkValidity to match the specific card pattern that is dynamically added to the input field. For example, if a user enters a Mastercard number such as 545454545 ...

javascriptjqueryvalidationcredit-cardtypescript

Different Ways Split Button Format Can Vary Based on Web Browser

I am encountering a formatting issue with a jQuery splitbutton on my webpage. In order to adhere to my company's design standards, I am essentially converting a link into a button. The functionality works perfectly fine; however, depending on the brow ...

javascriptjqueryhtmlcssinternet-explorer

Tips for utilizing the "Sign In with Apple" feature through Apple JS

For implementing "Sign In with Apple" on a web platform using Apple JS, you can refer to the code example available at this link. Now, the query arises: where can I find the Client ID required for this process? I have tried using the app id identifier fro ...

javascripthtmlapple-sign-in

Can React components be saved in an array?

I am currently working on enhancing the code snippet provided below. This code is intended to iterate through elements of an array using keys to locate images within a lengthy SVG file directly embedded in the document under the identifier "SomelongUglySVG ...

javascriptarraysreactjsloopssvg

Here's a method for transferring data from one array to another: when there is existing data in the

Although this may seem simple to some, I have been struggling with it for hours without any success. If I have the following data in an array: var tDataValues = { id: "TenantID", text: "FullName", username: "Username", cnic: 'CNIC&ap ...

javascriptjqueryarraysjquery-select2

Navigating through Leaflet to reference a .json file

Looking to integrate a .json vector layer into a Leaflet.js map, which can be seen on the GitHub page here, with the source code available here. Here's a condensed version of the file for reference (full version visible on the linked GitHub page). & ...

javascriptjsonleaflet

React: Managing various browsers and browser tabs to prevent duplicate operations

On my webpage, I have a button labeled Submit that, when clicked, triggers an operation by calling an API. After the button is clicked, it should be disabled or changed to reflect that the operation has started. I am facing an issue where multiple browser ...

javascriptreactjsbrowser