Toggle between tabs by dynamically selecting radio buttons

Question

Toggle between tabs by dynamically selecting radio buttons

On my webpage, I have numerous tabs following the same structure as seen on the angular-ui page. Each section contains tabs for both Markup and Javascript.

My goal is to implement two radio buttons at the top of the page that can switch all tabs to either Markup or Javascript based on the selected button.

I am currently utilizing ui.bootrap.tabs but the tabs are static in nature:

<tabset>
    <tab heading="Markup">content for 1st markup tab</tab>
    <tab heading="Javascript">content for 1st javascript tab</tab>
</tabset>
.
.
.
<tabset>
    <tab heading="Markup">content for 2nd markup tab</tab>
    <tab heading="Javascript">content for 2nd javascript tab</tab>
</tabset>

The radio buttons are sourced from the same location:

<div class="btn-group">
    <button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'markup'">markup</button>
    <button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'javascript'">javascript</button>
</div>

I have been unsuccessful in my attempts so far. Any assistance would be greatly appreciated.

javascript angularjs

Answer 1

Answer №1

Regrettably, placing an expression in the active attribute of a tab is currently not feasible, preventing something like this:

<tab heading="Markup" active="radioModel === 'markup'">content for 1st markup tab</tab>

For more information, visit https://github.com/angular-ui/bootstrap/issues/611.

However, there is still a way to achieve the desired functionality in a more complex and dynamic manner. My suggestion is to create a data model in your scope to store the tabs configuration and monitor the radioModel value to toggle the active state on each tab. Here's an example:

angular.module('app', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {

    $scope.radioModel = 'markup';
    $scope.tabs = [
        // First tab set
        [{
            title: "Markup",
            content: "content for 1st markup tab",
            type: 'markup'
        }, {
            title: "Javascript",
            content: "content for 1st javascript tab",
            type: 'javascript'
        }],
        //Second tab set
        [{
            title: "Markup ",
            content: "content for 2nd markup tab ",
            type: 'markup'
        }, {
            title: "Javascript ",
            content: "content for 2nd javascript tab",
            type: 'javascript'
        }]
    ];


    $scope.$watch('radioModel', function (newValue) {
        //Iterate over all the tabset configuration
        angular.forEach($scope.tabs, function (value, key) {
            //iterate over each tab in a tabset
            angular.forEach(value, function (tab, key) {
                //Set the active attribute when needed 
                if (tab.type === newValue) {
                    tab.active = true;
                } else {
                    tab.active = false;
                }
            });
        });
    })
};

And here is the corresponding template:

<tabset>
    <tab ng-repeat="tab in tabs[0]" heading="{{tab.title}}" active="tab.active">{{tab.content}}</tab>
</tabset>
<br/>
<br/>
<tabset>
    <tab ng-repeat="tab in tabs[1]" heading="{{tab.title}}" active="tab.active">{{tab.content}}</tab>
</tabset>

A functional fiddle can be found here :)

Answer 2

Regrettably, placing an expression in the active attribute of a tab is currently not feasible, preventing something like this:

<tab heading="Markup" active="radioModel === 'markup'">content for 1st markup tab</tab>

For more information, visit https://github.com/angular-ui/bootstrap/issues/611.

However, there is still a way to achieve the desired functionality in a more complex and dynamic manner. My suggestion is to create a data model in your scope to store the tabs configuration and monitor the radioModel value to toggle the active state on each tab. Here's an example:

angular.module('app', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {

    $scope.radioModel = 'markup';
    $scope.tabs = [
        // First tab set
        [{
            title: "Markup",
            content: "content for 1st markup tab",
            type: 'markup'
        }, {
            title: "Javascript",
            content: "content for 1st javascript tab",
            type: 'javascript'
        }],
        //Second tab set
        [{
            title: "Markup ",
            content: "content for 2nd markup tab ",
            type: 'markup'
        }, {
            title: "Javascript ",
            content: "content for 2nd javascript tab",
            type: 'javascript'
        }]
    ];


    $scope.$watch('radioModel', function (newValue) {
        //Iterate over all the tabset configuration
        angular.forEach($scope.tabs, function (value, key) {
            //iterate over each tab in a tabset
            angular.forEach(value, function (tab, key) {
                //Set the active attribute when needed 
                if (tab.type === newValue) {
                    tab.active = true;
                } else {
                    tab.active = false;
                }
            });
        });
    })
};

And here is the corresponding template:

<tabset>
    <tab ng-repeat="tab in tabs[0]" heading="{{tab.title}}" active="tab.active">{{tab.content}}</tab>
</tabset>
<br/>
<br/>
<tabset>
    <tab ng-repeat="tab in tabs[1]" heading="{{tab.title}}" active="tab.active">{{tab.content}}</tab>
</tabset>

A functional fiddle can be found here :)

Answer 3

Answer №2

Utilize a functional expression in the "active" attribute as shown below.

<tabset>
    <tab heading="HTML" active="htmlSelected">content for the HTML tab</tab>
    <tab heading="CSS" active="cssSelected">content for the CSS tab</tab>

Next, define the function in the scope like this:

angular.module('example', ['ui.bootstrap'])
  .controller('myController', function($scope) {
    $scope.tabModel = 'html';
    $scope.$watch('tabModel', function(selectedTab) {
      $scope.htmlSelected = (selectedTab === 'html');
      $scope.cssSelected = (selectedTab === 'css');
    });
  });

Check out the live example on Plunker: Updated: http://plnkr.co/edit/hJIG5a?p=preview

Answer 4

Utilize a functional expression in the "active" attribute as shown below.

<tabset>
    <tab heading="HTML" active="htmlSelected">content for the HTML tab</tab>
    <tab heading="CSS" active="cssSelected">content for the CSS tab</tab>

Next, define the function in the scope like this:

angular.module('example', ['ui.bootstrap'])
  .controller('myController', function($scope) {
    $scope.tabModel = 'html';
    $scope.$watch('tabModel', function(selectedTab) {
      $scope.htmlSelected = (selectedTab === 'html');
      $scope.cssSelected = (selectedTab === 'css');
    });
  });

Check out the live example on Plunker: Updated: http://plnkr.co/edit/hJIG5a?p=preview

Toggle between tabs by dynamically selecting radio buttons

Answer №1

Answer №2

Similar questions

What is the procedure for closing a snackbar when the close button is clicked?

Encountering an Angular compile template error in a local project and jsFiddle, yet everything is running smoothly in Plunker

What is the best way to show the previous month along with the year?

Center a span vertically inside a div as the text within the span grows to occupy the entire div

Utilizing the power of Angular's $resource within a factory to showcase information stored in a deeply nested

Removing HTML DOM elements from a string using JavaScript: A step-by-step guide

A unit testing tool in Javascript that does not function properly when in strict mode

Error: The function $.ajax(...).done(...).fail(...).complete does not exist

Oops! A problem occurred during JSON parsing: an unexpected non-whitespace character was found after the JSON

How to ensure the priority of props.className in CSS-in-JS implementations

Firefox triggers drag events while passing over a div scrollbar

Switch up the box-shadow color with ColorThief!

Retrieve information from an SQL database using user input in a Classic ASP form without the need to refresh the page

Adding null at the end of a JSON encoded PHP array

The compiler option 'esnext.array' does not provide support for utilizing the Array.prototype.flat() method

What are some effective troubleshooting methods for resolving issues with chrome.storage.sync?

Automated browsing: identifying the difference between AJAX and iframes

When deploying on Vercel, template literals cannot be used inside the src attribute of an image in NextJS

Encountering issues with connecting to the MongoDB server through Node.js

tsconfig.json: No input files were detected in the configuration file