current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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;} '
share|improve this question
    
can you use ng-class? –  huan feng Nov 7 '14 at 6:12
    
I dont know how to use ng-class :( . Im Just newbee on angular.. –  KeenEgs Nov 7 '14 at 6:14
1  
i think captain has already give you the answer:) –  huan feng Nov 7 '14 at 6:17

3 Answers 3

up vote 1 down vote accepted

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);
share|improve this answer
    
thanks to your idea –  KeenEgs Nov 7 '14 at 8:16
up vote 2 down vote

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";
}
share|improve this answer
    
How can I apply my codes ? Sorry . Im really a newbee :( –  KeenEgs Nov 7 '14 at 6:14
    
I have modified my answer with a simple example. –  captain_jim1 Nov 7 '14 at 6:18
    
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 Nov 7 '14 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 Nov 7 '14 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 Nov 7 '14 at 6:32
up vote 0 down vote

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

share|improve this answer
    
Do you any sample that I can apply my data..Sorry for being newbee.. –  KeenEgs Nov 7 '14 at 6:16
    
Please refer the below documentation docs.angularjs.org/api/ng/directive/ngClass –  user3275109 Nov 7 '14 at 6:19

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.