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

Unspecified outcome of Ajax array as a choice in Select

Utilizing HTML5 and JQuery for Drag and Drop functionality: Moving an image to populate a linked webpage within an iframe upon dropping

Graph columns failing to display on Chart.js bar chart

Interacting with the DOM of an iFrame from a separate window using Javascript

Unlocking the API endpoints within nested arrays in a React project

Tips for aligning text vertically in flexbox arrangements

Making an Ajax call using slash-separated parameters

How can data be sent to an AJAX request using jQuery?

Is it necessary to upload a file in order to view a webpage? Could it be that my coding skills

Reactjs is having issues with Datatable functions

Is it better to convert fields extracted from a JSON string to Date objects or moment.js instances when using Angular and moment.js together?

Next.JS: The Key to Long-Term Data Storage

When an express pre-remove signal initiates another pre-remove action during the removal process

When I try to send data from my Node.js application to my MySQL database, the information does not

Error: The function 'check' is not defined and cannot be called when the 'on

The issue with AngularJS multiple $http requests failing to fetch accurate data

Building a stylish bootstrap button within the cell rows of a table using jquery

Tips for making an AJAX request using jQuery

The process of transmitting messages back and forth between a popup script and a content script

What is the best way to create a fixed footer in Next.js using React?