2

Is it possible to dynamically change the value of a CSS property of a class using Angular? I am trying to pass a color value dynamically to CSS after it is retrieved from database, and I am in search of a solution for this.

I have been trying to see if I could make ng-animate work for this, but it is not as straightforward.

Any help is appreciated.

MadPhysicist
  • 5,401
  • 11
  • 42
  • 107

5 Answers5

1

There are multiple options, one of the ways is using ng-style. Let's say you have colors coming for each elements.

<ul>
  <li ng-repeat="item in items" ng-style="{'color': item.color}"></li>    
</ul>

If you want a single style color to be applied to all items of a class.

angular.element('.className').css('color','#DBCLOR');
Don
  • 1,334
  • 1
  • 10
  • 18
  • This would work. However, I have a further complication in that I have a CSS file that implements some animation on these colors. The animation needs the value of the color in several classes. Is there a way to do that efficiently? – MadPhysicist Jun 16 '16 at 00:24
1

Looks like following link has answer to you question. I would like to call it javascript way instead of angular way

How to dynamically create CSS class in JavaScript and apply?

Community
  • 1
  • 1
shams.kool
  • 343
  • 1
  • 2
  • 12
1

If you know the class name which is already defined somewhere (in stylesheet, html) you can again create style and give new values to the class. The new values will be applied to all the elements which are having this class. Try to create a new style tag and create the property and value for it using javascript. Try to append this into head. If this does not work try to append this to body.

var style = document.createElement('style');
var newColor = '#efefef'; //fetched from AJAX or anywhere
style.type = 'text/css';
style.innerHTML = '.cssClass { color: '+ newColor +  '; }';
document.getElementsByTagName('head')[0].appendChild(style);
Rahul Malu
  • 556
  • 2
  • 9
0

if you dynamically change the value of a CSS property of a class, you would refer to ng-class

  1. using ng-class

    <ANY ng-class="expression"> ... </ANY>

    you also can do as below, if expression is true, it will add class 'class-a'

only have a class:

<div ng-class="{ class-a: expression }"></div>

more than two classes:

<div ng-class="{ class-a: expressionA, class-b: expressionB, class-c: expressionC }"></div>

  1. using $scope

    html:

    <div class="{{classPro}}></div>

    js:

    $scope.classPro = "className";

Python Basketball
  • 2,320
  • 3
  • 24
  • 47
  • 2
    I am not looking to add a class. I am looking to change the value of a field on an existing class. Is that possible with ng-class? – MadPhysicist Jun 16 '16 at 00:22
  • yes, you can do it! if you want to change the value of calss, you can use
    , when expressionA is false and expressionB is true, it means change class-a to class-b     – Python Basketball Jun 16 '16 at 02:55
  • 1
    Once again, you are misunderstanding what I am trying to do. I am asking if it is possible to have Class A with, say, {color: #ffffff} and Class B with {color: #aaaaaa}. Now, I am asking if I can dynamically assign these hex values for any class using Angular. – MadPhysicist Jun 16 '16 at 03:35
0

Use ng-style to accomplish this

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  $scope.colors = ['red', 'blue', 'green'];
});
.item{
  padding:5px;
  width:100px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
  <div class="item" ng-repeat="color in colors" ng-style="{'background-color':color}">{{color}}</div>
</div>
byteC0de
  • 5,153
  • 5
  • 33
  • 66
  • How is your answer different then mine ? – Don Jun 14 '16 at 03:41
  • @Don Your code does not work, ng-style="{'color': item.color}" add color attribute in single quotes – byteC0de Jun 14 '16 at 03:47
  • Its meant to be a guide point, rather than actual code. User has not shared any code snippet anyway. And even if you find small issues like single quotes, shouldn't it be a comment to my answer rather than creating a duplicate answer ? – Don Jun 14 '16 at 03:49
  • This would work. However, I have a further complication in that I have a CSS file that implements some animation on these colors. The animation needs the value of the color in several classes. Is there a way to do that efficiently? – MadPhysicist Jun 16 '16 at 00:25