How can I update a CSS class value by utilizing AngularJS variables?

Question

How can I update a CSS class value by utilizing AngularJS variables?

I am currently facing an issue with making my CSS values dynamic. The code I have tried is not functioning as expected.

<style>
    .panel-primary {
         background-color:{{myColorPanel}}
    }
</style>

I came across a similar query on How to Dynamically create a CSS class using AngularJS

I am unsure about the mistakes in my code that are causing it not to work.

If anyone has an alternative solution to this problem, please share.

I simply want to customize the colors of Bootstrap panels without having to use ng-class or ng-style individually for each panel since there are many.

If you have any ideas, please let me know.

Full Code

<!DOCTYPE html>
<html data-ng-app="Aptus">
<head>
...
... (Code continues)
...
</body>
</html>

javascript html css angularjs

Answer 1

Answer №1

In this illustration below, I have demonstrated a straightforward method on how you can interchange classes without directly altering them, although it may not be considered the most common approach.

function UpdateClass($scope) {
    $scope.selectedClass = 'blue'
}

.blue { color: blue }
.red { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="UpdateClass">
  <h2 ng-class="selectedClass" ng-click="selectedClass = selectedClass == 'blue' ? 'red' : 'blue'">Click Me!</h2>
</div>

Answer 2

In this illustration below, I have demonstrated a straightforward method on how you can interchange classes without directly altering them, although it may not be considered the most common approach.

function UpdateClass($scope) {
    $scope.selectedClass = 'blue'
}

.blue { color: blue }
.red { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="UpdateClass">
  <h2 ng-class="selectedClass" ng-click="selectedClass = selectedClass == 'blue' ? 'red' : 'blue'">Click Me!</h2>
</div>

Answer 3

Answer №2

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    
    <script>
      angular.module("myApp",[]).controller("myController",function($scope){
      $scope.name="john";
        $scope.myColorPanel ="blue";
        $scope.colorChange=function(color){
         $scope.myColorPanel =color;
        }
      });
    </script>
    </head>
  <body ng-app="myApp" ng-controller="myController">
    <style>
        .panel-primary {
             background-color:{{myColorPanel}};
        }
    </style>
  <div class="panel-primary"><h3>{{name}} ,AngularJS Color Change Effect</h3></div>
    <button ng-click="colorChange('green')">Green</button>
    <button ng-click="colorChange('purple')">Purple</button>
    <button ng-click="colorChange('orange')">Orange</button>
    <button ng-click="colorChange('white')">White</button>
    
  </body>
  </html>

Hope you found this information helpful!

Answer 4

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    
    <script>
      angular.module("myApp",[]).controller("myController",function($scope){
      $scope.name="john";
        $scope.myColorPanel ="blue";
        $scope.colorChange=function(color){
         $scope.myColorPanel =color;
        }
      });
    </script>
    </head>
  <body ng-app="myApp" ng-controller="myController">
    <style>
        .panel-primary {
             background-color:{{myColorPanel}};
        }
    </style>
  <div class="panel-primary"><h3>{{name}} ,AngularJS Color Change Effect</h3></div>
    <button ng-click="colorChange('green')">Green</button>
    <button ng-click="colorChange('purple')">Purple</button>
    <button ng-click="colorChange('orange')">Orange</button>
    <button ng-click="colorChange('white')">White</button>
    
  </body>
  </html>

Hope you found this information helpful!

Answer 5

Answer №3

After much investigation, I finally identified the root issue. It turns out that the version of AngularJS I was using did not support the desired styling. This is likely due to the fact that it is an older version within an existing system. In order to resolve this issue, I upgraded from version 1.2x to a more recent version (1.5x), which successfully enabled all the code I needed. I am appreciative of the efforts put forth by everyone involved. Although I should have been more aware of the AngularJS version discrepancy, I am grateful for your assistance.

The ultimate solution lay in transitioning from the outdated version to the newer one.

Answer 6

After much investigation, I finally identified the root issue. It turns out that the version of AngularJS I was using did not support the desired styling. This is likely due to the fact that it is an older version within an existing system. In order to resolve this issue, I upgraded from version 1.2x to a more recent version (1.5x), which successfully enabled all the code I needed. I am appreciative of the efforts put forth by everyone involved. Although I should have been more aware of the AngularJS version discrepancy, I am grateful for your assistance.

The ultimate solution lay in transitioning from the outdated version to the newer one.

Answer 7

Answer №4

If you're looking for a reliable method that works with AngularJs, ng-class is the top choice. For more information, take a look at this resource. Hopefully, it will provide the solution you need.

Answer 8

If you're looking for a reliable method that works with AngularJs, ng-class is the top choice. For more information, take a look at this resource. Hopefully, it will provide the solution you need.

Answer 9

Answer №5

It seems like everything should be functioning properly.

Could it be possible that there are additional instances where the background color for .panel-primary is specified?

Confirm that you have incorporated bootstrap into your project and ensure that your custom CSS is applied after bootstrap's CSS.

Answer 10

It seems like everything should be functioning properly.

Could it be possible that there are additional instances where the background color for .panel-primary is specified?

Confirm that you have incorporated bootstrap into your project and ensure that your custom CSS is applied after bootstrap's CSS.

Answer 11

Answer №6

Make sure to place the style tag inside your controller, not in the head tag like this:

<body ng-controller="MainCtrl">
    Background of div is <input ng-model="name">
    <style>
      .p { background-color: {{name}}; }
    </style>
    <div class="p">dddd</div>
  </body>

Answer 12

Make sure to place the style tag inside your controller, not in the head tag like this:

<body ng-controller="MainCtrl">
    Background of div is <input ng-model="name">
    <style>
      .p { background-color: {{name}}; }
    </style>
    <div class="p">dddd</div>
  </body>

How can I update a CSS class value by utilizing AngularJS variables?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Instead of displaying an error page, an Axios post request is returning data

The combination of React.js and debouncing on the onChange event seems to be malfunctioning

Pass the JavaScript variable and redirect swiftly

The issue of AngularJS + Jade ng-repeat not populating the table is a common problem

encountering the issue of not being able to assign a parameter of type 'string | undefined' to a parameter of type

Instantly summing up two numbers with javascript

What is the reason behind re-rendering pages specifically for error messages in express and nodejs?

Is VueJS2 using the computed property/method to modify Vue data?

Steps to adding a collection of links (stylesheets, javascript files) to each html document

The event OT.Publisher.onStreamAvailableError is triggered when the media stream is unexpectedly aborted,

Angular 8 combined with Mmenu light JS

Using the Rails cocoon gem to populate numerous input fields

Expanding cards with Material-UI and React seems to be a challenge when using an expander

Implement jQuery Tabs in Brackets software to enhance user experience

Is there a way for me to receive numerical values instead of NaN?

Does AngularJS really allow for seamless event communication between modules?

Positioning the video tag bar in HTML is a crucial element to

Horizontally position the main word from the D3-WordCloud in the center

Position the text to the right of the div or image and allow

Tips on invoking a Stencil component function or method from beyond the Vue instance