Changing CSS dynamically AngularJS

Question

I want to change the style of any class inside otc-dynamically ,one time and dynamically. Since the CSS styles is coming from Web Api. Is there's a way javascript can do that ?

Thanks for those who will help

This my HTML:

 <accordion close-others="false"> <div> <accordion-group class="div-recipe-header"> <accordion-heading></accordion-heading> <my-directive></my-directive> <div otc-dynamic> <div class="div-recipe-name"></div> <div class="div-recipe-cost"></div> </div> </accordion-group> </div> </accordion>

Sample Data from Json ( I put the data in variable usercss)

usercss = '.div-recipe-cost{position: absolute;top: 0;left: calc(100% - 85px);bottom: 0;overflow:padding-top: 5px;padding-bottom: 5px;padding-right: 0;font-family: 'Segoe UI', 'Open Sans', 'Roboto', 'Lucida Grande', 'Helvetica', 'Arial', 'sans-serif';font-size: small;background: none;overflow: hidden;font-weight: bold;} .div-recipe-name{position: absolute;top: 0;left: 12px;bottom: 0;width: calc(100% - 0px);padding-top: 5px;padding-bottom: 5px;padding-right: 0;height: calc(100% - 0px);font-family: 'Segoe UI', 'Open Sans', 'Roboto', 'Lucida Grande', 'Helvetica', 'Arial', 'sans-serif';font-size: large;background: none;overflow: hidden;} '

I dont know how to use ng-class :( . Im Just newbee on angular.. — KeenEgs, CommentedNov 7, 2014 at 6:14

Community · Accepted Answer · 2017-05-23 11:33:13Z

Use ng-class. This will allow you to dynamically set classes. Additionally, you can use ternary operations with ng-class as seen here.

I assume you have your classes defined in a style-sheet that is loaded into memory.

 .white{ color: #ffffff; } .black{ color: #000000; }

In your angular controller you can have a variable defined that will hold your class-name. Here I am setting it to apply 'white' by default.

$scope.myClass = "white";

Then in your markup you simply bind that variable to your element with ng-class.

<div ng-class="myClass">....</div>

Now, whenever $scope.myclass changes the appropriate class will be added to the div and the old class will be removed. So, in your controller you'll have something that will trigger a change...

if( some_condition ){ $scope.myClass = "black"; } else { $scope.myClass = "white"; }

That is angularjs is not for newbees. I suggest learning the basics and what are the good practices with plain css and javascript before jumping in complex frameworks like angularjs. I've been coding javascript and css for more than 10 years and angularjs is still difficult for me to understand in complicated scenarios after working with it for 3 months — Michail Michailidis, CommentedNov 7, 2014 at 6:18
@captain, how the css will change ? in what area of your codes will i put the variable holding the CSS styles — KeenEgs, CommentedNov 7, 2014 at 6:24
I have modified my answer to include more detail. Your css should be defined in classes. Is this not possible? — captain_jim1, CommentedNov 7, 2014 at 6:32

Hereblur · Accepted Answer · 2014-11-07 06:30:04Z

Look like you are doing reverse ?

You assigned class to elements. and then download the style of each class later from JSON.

You can just embed those style to you document

usercss = '.div-recipe-cost{position: ab........'; // Your css var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = usercss; document.body.appendChild(css);

user3275109 · Accepted Answer · 2014-11-07 06:15:17Z

Instead of getting entire css content just get the dynamic class name from backend json . Keep the class definition in your local file , then apply it dynamically through ng-class directive

Please refer the below documentation docs.angularjs.org/api/ng/directive/ngClass — user3275109, CommentedNov 7, 2014 at 6:19

Collectives™ on Stack Overflow

Changing CSS dynamically AngularJS

3 Answers 3

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Linked

Related