Hide the external div if the tab is active in Angular Bootstrap

How can I determine if a specific tab is active and then hide a div outside all tabs when it is active?

Plunker: https://plnkr.co/edit/b9O9S7JxxgzhQKcKONkn?p=preview

  <div class="border">
    Conceal me when Tab #3 is active.
  </div>
  <hr>
  <form name="outerForm" class="tab-form-demo">
    <uib-tabset active="activeForm">
      <uib-tab index="0" heading="Tab #1">
        <ng-form name="nestedForm">
          <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" required ng-model="model.name"/>
          </div>
        </ng-form>
      </uib-tab>
      <uib-tab index="1" heading="Tab #2">
        Some Tab Content
      </uib-tab>

      <uib-tab index="2" heading="Tab #3">
        More Tab Content
      </uib-tab>

    </uib-tabset>
  </form>

Answer №1

Implement ng-hide in your code for functionality as shown below:

<div class="border" ng-hide="activeForm==2">
    This section will be hidden when Tab #3 is active.
</div>

Check out the plunker example

Answer №2

If you want to hide a certain element when a specific tab is active, you can use the value stored in activeForm, which corresponds to the index of the tab.

<div class="border" ng-show="activeForm != 2" >
    This element will be hidden when Tab #3 is active.
  </div>

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

Tips for preventing redirection in Vue 3 composition API with asynchronous requests

I have successfully configured a submission form to send data to my email and add it to a Google sheet using the method described in this GitHub link. The process worked seamlessly for both purposes. However, I am facing an issue where upon submitting the ...

Refreshing JSON data every 10 seconds using SVG/D3

What is the best way to program a D3/json/ajax query that retrieves new data every 10 seconds? Here is my initial attempt at a solution, but I believe it may not be ideal: setInterval(function() { d3.json("http://1.....", function(json) { .... }) ...

How to retrieve the value instead of the key/ID in a Laravel controller?

I am extracting data from the database and displaying it on the invoice view page using the json_encode($items); function. When I try to insert the 'price' field into the database, only the id/key is being stored instead of the actual value. Any ...

What is the best way to access the dimensions of a parent element in React with Hooks?

I am currently working on a new component and I am facing the challenge of obtaining the width and height of its parent <div>. Since all my components are functional ones using Hooks, the examples I found involving classes do not fit my case. Here i ...

Convert JavaScript code to Google Appscript

Looking for guidance on incorporating Javascript code into my Google Appscript. Here is the code snippet: I have a separate Stylesheet.html file saved. Can someone advise me on how to invoke the functions within the html file? <script> //google. ...

The error message "TypeError: self.parent.parent.context.parseInt is not a function" indicates that

My goal is to set the height of an image using ngStyle by calculating it with a Math operation in the following way: <div [ngSwitch]="tbNm?tbNm:'itm0'"> <ion-list *ngFor="let vl of scrnshot;let ind=index"> <img *ngSwitch ...

Dynamic field validation using jQuery

I am currently developing a wizard feature that retrieves employees dynamically from the backend. The employee table is created with a radio input field and then inserted into my HTML code: $.ajax({ method: "get", url: '/fetchEmployees/' ...

Combining Angular, WebAPI, and CORS for seamless integration

Running a web application in angular requires calling a separate ASP.NET Web API on different ports, with the web server on port 44302 and the web API on port 44307. CORS settings have been configured on the web API server to allow cross-origin requests: ...

AngularJS selectChosen does not have built-in support for translation

<select chosen options="myOptions" ng-model="StatCode" data-placeholder="{{'PleaseSelect' | translate}}" ng-options="item[0] as item[1] + ' / ' + item[0] for item in myOptions" required>< ...

Encountering issues when attempting to incorporate ng-bootstrap into an AngularJS project

Having trouble injecting ng-bootstrap into my Angular module. I keep getting an error. <script type="text/javascript" src="js/lib/jsapi.js"></script> <script type="text/javascript" src="js/lib/jquery.min.js"></script> <scr ...

Dynamic headers with $save in AngularJS $resource

I have been attempting to include dynamic headers in a $resource as shown below: angular.module('app') .factory('API', function ($resource, API_URL) { return { event: function(userId){ return $resource(API_URL + '/event/ ...

Counter is effective for the initial post, yet it does not function properly for the subsequent post

Can anyone help with an issue I'm having with my JavaScript counter? It works for the first comment, but not the second one. This problem persists whether I use PHP or JavaScript. Below is the JavaScript code for the counter: var count = (function() ...

Is there a way to make a `select` in AngularJS refresh itself automatically?

I'm encountering an issue with the 'select' element. When I choose an option in the first 'select', the result does not immediately appear in the second 'select'. Instead, I have to manually refresh the page using 'F ...

Using Jquery and CSS to display or conceal table elements depending on viewport width

I am seeking advice for my issue. Here is the code snippet on JSFiddle. I have a list of models and corresponding values that vary across different categories. I have created a simple table to display this data. However, I need to alter the table structur ...

Issue with Parcel 2 - Error encountered: Module 'axios' not found

I have enrolled in a Udemy course called 'Node.js, Express, MongoDB & More'. The instructor uses parcel v1 in the course, but now that parcel has released v2, I am facing issues installing v1. I am attempting to access the file from the dist dire ...

Every individual child component must be assigned a distinct key prop, even if they are pre-defined. - Utilizing REACT

My navigation bar routes are sourced from a JSON file structured like this: { "categorias": [ { "nombre": "Teacher absences", "componentes": [ { "type": "url", ...

Executing a jQuery function only once per click on a select element - how can it be done?

I have a form with a select element, and I want some code to run when I click on it, but not when I choose an option. The issue is that the code is running twice, preventing me from selecting an option as it resets itself each time. Here is the HTML: &l ...

Firefox's keyup event

Is it possible to detect a keypress using the jQuery keyup function, as I am facing an issue where it works in Chrome, Edge, IE, and Opera but not in Firefox. $(".textfield").contents().keyup(function(evnt) { document.getElementById("btn_save").style. ...

The for each loop fails to return the value

In my Vue component, I have a conditional loop that iterates through train stations with 'New York' as the destination or on the route. <tr v-for="departure in filterTrainStations" :key="departure.name"> <td>{{ departure. ...

Issue: The object is unable to be executed as a function, resulting in the failure to return an array

Currently, I am extracting table values from the UI row by row. This involves clicking on each row and retrieving the corresponding data. exports.getTableData = function(callback){     var uiArray =[];     var count;         aLib.loadCheck(c ...