up vote 1 down vote favorite

I have an Angular JS web site where I am using data from an API that I want to use to dynamically create a CSS class. This CSS class will then format other data from the API being displayed in an Angular JS page.

For example, is there a way for Angular JS $scope data to be created in the Controller while processing the API data and then on the corresponding .html view, use this $scope data to dynamically create a CSS class ... By the way, $scope data cannot be used inside the HTML 'STYLE' tag, because the bracket characters ('{' and '}') are treated as 'STYLE' characters, so it does not allow '{{' and '}}' to expand the value of a $scope variable.

EDIT: The above comments were based on using the Visual Studio 2013 IDE where the Angular syntax is shown as an Error in the VS IDE. Using this syntax (as shown below by Valentyn) allows a CSS class to define dynamic attributes and works great.

share|improve this question
up vote 2 down vote accepted

You can use {{ and }} inside of <style>:

<style>
      .p { background-color: {{name}}; }
</style>

Try: http://plnkr.co/edit/MMgRJP0fFCowE1rxcULM?p=preview

share|improve this answer
    
Thanks ... I am using Visual Studio 2013 and this syntax shows an error, so I did not think it would work. When I ran the page with my $scope variables, it worked great. – Dean Henderson Nov 30 '15 at 2:43
up vote 0 down vote

You can try use ng-style for this:

<element ng-style="function_result() or expression"></element>
share|improve this answer

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.