如何使用AngularJS动态创建CSS类 [英] How to Dynamically create a CSS class using AngularJS

问题描述

我有一个角JS网站，在那里我使用从我要用来动态地创建一个CSS类的API数据。这个CSS类，然后将格式化从API的其他数据显示在一个角JS网页。

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.

例如，是否有在控制器中创建角JS $范围的数据在处理API数据，然后在相应的.html认为，使用这种$范围的数据来动态地创建一个CSS类的方式...顺便说一句，$范围的数据不能在HTML风格标签中使用，因为括号字符（'{'和'}'）作为风格字符处理，所以它不允许'{{'和' }}'以扩展$范围变量的值。

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.

编辑：上面的意见是基于使用Visual Studio 2013 IDE，其中角语法显示为VS IDE的错误。使用这种语法（如Valentyn如下图所示）允许一个CSS类来定义动态属性和伟大工程。

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.

推荐答案

您可以使用 {{和}} 里面的＆LT;风格＆GT; ：

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

尝试：
http://plnkr.co/edit/MMgRJP0fFCowE1rxcULM?p=$p$pview

这篇关于如何使用AngularJS动态创建CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！