Implementing dynamic CSS in AngularJS using conditional statements

Question

Implementing dynamic CSS in AngularJS using conditional statements

One technique I've been using in angularjs involves toggling between two windows using the ng-click and ng-show directives:

<div ng-init="showTab2 = false">
            <a ng-click="showTab2 = true; showTab1 = false ">#Tab1 </a>
        </div>
 <div ng-init="showTab2 = true">
            <a ng-click="showTab1 = true; showTab2 = false">#Tab2</a>
        </div>

By utilizing ng-show, these tabs become visible based on the selected state.

I'm currently looking for guidance on how to customize the color of the selected tab. Any insight would be greatly appreciated!

Many thanks,

javascript css angularjs

Answer 1

Answer №1

I'm uncertain about how the ng-show applies in this context, but you can utilize ng-class to switch CSS styles:

<a ng-class = "{'some-class': showTab1}" 
  ng-click="showTab1 = true; showTab2 = false">#Tab1</a>

Answer 2

I'm uncertain about how the ng-show applies in this context, but you can utilize ng-class to switch CSS styles:

<a ng-class = "{'some-class': showTab1}" 
  ng-click="showTab1 = true; showTab2 = false">#Tab1</a>

Answer 3

Answer №2

For a working demo, you can view it here: Example

JavaScript:


var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.showTab = 1; // Set default tab to be selected
});

HTML:


<div>
    <a ng-click="showTab = 1" ng-class="{'active': showTab == 1}">#Tab1 </a>
</div>
<div>
   <a ng-click="showTab = 2"  ng-class="{'active': showTab == 2}">#Tab2</a>
</div>

<div ng-switch="showTab">
    <span ng-switch-when="1">Tab1</span>
    <span ng-switch-when="2">Tab2</span>
</div>

CSS:


.active {
   color: red;
}

Answer 4

For a working demo, you can view it here: Example

JavaScript:


var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.showTab = 1; // Set default tab to be selected
});

HTML:


<div>
    <a ng-click="showTab = 1" ng-class="{'active': showTab == 1}">#Tab1 </a>
</div>
<div>
   <a ng-click="showTab = 2"  ng-class="{'active': showTab == 2}">#Tab2</a>
</div>

<div ng-switch="showTab">
    <span ng-switch-when="1">Tab1</span>
    <span ng-switch-when="2">Tab2</span>
</div>

CSS:


.active {
   color: red;
}

Implementing dynamic CSS in AngularJS using conditional statements

Answer №1

Answer №2

Similar questions

Executing Actions Prior to Redirecting

What is the initial Validity setting in Angular?

How to choose the placeholder element in Svelte?

Steps to make a pop-up window for text copying by users

Disable other actions during jquery change event validation

Understanding the fundamentals of event handling in JavaScript

I am currently running a recursive loop to fetch data from MongoDB. However, the Express.js function runs through the entire script before the data can be successfully returned

Modify session variable upon link click

Substitute phrases with hyperlinks using JavaScript (or Ruby)

The Next.js build process encountered an error when building due to an issue with plotly.js (The build failed with a ReferenceError: self is

Scaling Youtube video backgrounds with Squarespace

AngularJS OAuth authentication Pop-up: Waiting for JSON response

Ajax request resulted in a 400 bad request error

Transforming an ordinary JavaScript object into a class instance

How can I effectively set up and utilize distinct npm modules on my local environment?

Navigating Pre-Fetched Client Routes in Gatsby with @ReachRouter

Executing an AngularJS function within a form element using the ng-submit directive

Leveraging the (click) event within an HTML template to manage a [hidden] element located in a different template using Angular 2

The Magic of ngModel Formatters and Parsers

Avoiding line wrapping can be achieved by hiding elements using the d-none class from Bootstrap