When using ng-repeat with Angular ui-bootstrap and tabs, the new tab will not be selected if there are no existing tabs present

To showcase the problem I'm facing, please refer to this link: http://codepen.io/pietrofxq/pen/ZLLJdr?editors=1010

Click on "remove tabs" and then on "add tab"

The challenge at hand involves using a loop with ng-repeat to display tabs. At times, there may be no items in the array, but when one tab is added back, it should automatically be selected since it's the only tab present in the tabs array. Currently, the behavior requires clicking on the tab for Angular to recognize that it's selected. How can I ensure that the tab is selected upon addition to the array without needing a click?

javascriptangularjsangular-ui-bootstrap

Answer №1

Discovered a clever workaround to get it functioning.

Managing multiple tabs requires keeping track of each one:

$scope.tabs = {
  tabOne: 0,
  tabTwo: 0
}

<uib-tabset active="tabs.tabOne"></uib-tabset>
<uib-tabset active="tabs.tabTwo"></uib-tabset>

If the array is empty and another tab is added, the value needs to be reset within a $timeout call:

$scope.$watch("items", function() {
 $timeout(function() {
    for (var prop in $scope.tabs)
      $scope.tabs[prop] = 0 
  })
}

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

Sharing package JSON file dependencies with child engines and addons in Ember.js

I am seeking information on how Ember Js can share the parent app's package.json file dependency (xyz:3.0.0) with child engines and addons without them needing to redeclare the dependencies in their own package.json files. This is to reduce the overal ...

javascripthtmlnpmember.jspackage.json

Is the each() method in jQuery essentially a for loop?

Experimenting with adding a serialized class to a group of objects, I attempted the following approach: jQuery('#preload img').each(function(){ jQuery('#thumbs').append('<img class="index' + index + '" src="&apos ...

javascriptjquery

What is the best way to iterate through multiple iframes?

I need help figuring out how to load one iframe while having the next one in line to be displayed. Is there a way to create a script that cycles through multiple iframes after a certain amount of time? ...

javascriptjqueryhtmlajaxiframe

`18n implementation in Node.js and front-end JavaScript for localization`

I am currently utilizing express js 4.0 and have set up the i18n module from https://github.com/mashpie/i18n-node in combination with ejs views. My goal is to extend this i18n functionality to .js files as well. Is there a way to enable the i18n function ...

javascriptnode.jsexpressinternationalization

Uninstall webpack-dev-server version 1.14.1 and replace it with version 1.14.0

Can someone help me with the process of uninstalling webpack-dev-server 1.14.1 and installing version 1.14.0 on Ubuntu using just commands? Error message: Uncaught TypeError: Cannot read property 'replace' of null at eval (eval at globalEval (jq ...

javascripthtmlubuntu

Concatenate a variable string with the JSON object key

I am currently working on a request with a JSON Object structure similar to the following: let formData = { name: classifierName, fire_positive_examples: { value: decodedPositiveExample, options: { filename: 'posit ...

javascriptnode.jsjson

Issue with NPM peer dependencies enforcement

Forgive me if this question seems basic - I am new to Meteor... I am creating an application using meteor 1.3.1 and following the Socially tutorial for guidance as it aligns closely with my needs. However, I am encountering a persistent error in my consol ...

angularjsmeteornpmrequirementspeer

Assign a value to a locally scoped variable within an iteration in Angular 2

Within my Angular code, I have the following HTML snippet: <span *ngIf="ControllerType?.AttributeID =='Controller Type'"> <select multiple name="ControllerType.Default" [(ngModel)]="Contro ...

javascriptjqueryangular

Comparing Arrays with jQuery

I am currently working on a tic-tac-toe project that involves a simple 3x3 grid. I have been storing the index of each selected box in an array for each player. However, I am facing difficulty in comparing my player arrays with the winner array to determin ...

javascriptjqueryarrays

Tips for narrowing down table searches to only rows containing certain text within a column

Currently, I have a function that allows me to search through my table: //search field for table $("#search_field").keyup(function() { var value = this.value; $("#menu_table").find("tr").each(function(index) { if (index === 0) return; var id = $( ...

javascriptjqueryajax

How to store lengthy JSON strings in SAP ABAP as variables or literals without extensive formatting restrictions

Is there a way to input lengthy JSON data into ABAP as a string literal without the need for excessive line breaks or formatting? Perhaps enclosing the string in a specific template, or utilizing a method similar to JSON.stringify(..) found in other langua ...

javascriptjsonserializationabap

Is it possible to include two functions within a single HTML script?

On my webpage, there are multiple tabs that display different sets of data. Below is the code for handling the functionality of these tabs: function openTab(event, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassNa ...

javascripthtml

Tips for updating process.version in a Node.js environment

After upgrading my node version from v3 to v11 using nvm with the command nvm use 11.12.0, I noticed that when I check the version using node -v in the terminal, it correctly shows 11.12.0. I also have a node js application that is started through pm2. I ...

javascriptnode.jsnpmpm2

Change the height of textarea dynamically using jQuery

I am trying to create a comment box similar to Facebook's, where it resizes as text fills it using Expanding Text Areas Made Elegant This is how my view looks: <div class='expandingArea'> <pre><span></span></ ...

javascriptjqueryhtmlajax

Error in React-router: Unable to assign value to the 'props' property as it is undefined

Currently, I am working on setting up routing with Meteor using the react-router package. However, I have encountered a specific TypeError: Here is a link to an image that provides more context: This is the code snippet from my main.js file: import Reac ...

javascriptmeteorreactjsreact-router

Creating an Angular application with the help of Express generator

I recently set up a project using express generator and installed bower to incorporate bootstrap and angular. My focus is on utilizing express for REST web services and setting up angular routes. While I can access my index page, there seems to be an issue ...

angularjsexpress

How to ensure your content is always visible on Mobile Safari iOS 8 by making sure it stays

Although minimal-ui is no longer supported on iOS8, I've encountered an issue with some fixed content at the bottom of a webpage. The page height is set to 100vh to cover the entire viewport, but some of the content at the bottom is extending below t ...

javascriptjqueryhtmlioscss

Having trouble retrieving a path reference from Firebase Storage using getDownloadURL() in React Native?

I am having trouble uploading some images and retrieving them using the .getDownloadURL() method. Oddly enough, it works perfectly fine in another part of my application when I update the user's profile picture, but for some reason, it fails in the co ...

javascriptreactjsfirebasefirebase-storage

Troubles with concealing dropdown menu when hovering

I have noticed that this issue has been raised before, but none of the solutions provided seem to fix my problem specifically. The submenu in my menu is not functioning as intended. It should be displayed when hovered over and hidden when not being hovere ...

javascripthtmlcss

The sequence of execution in the code is not as anticipated

JS <script type="application/javascript"> var app = angular.module("app", []); app.controller("AppCtrl", function ($scope, $http) { $scope.data = []; $http.get("{{ url_for('data') }}") ...

angularjs