如何使用 AngularJS 动态创建 CSS 类答案

【问题标题】：How to Dynamically create a CSS class using AngularJS如何使用 AngularJS 动态创建 CSS 类
【发布时间】：2015-11-30 01:04:50
【问题描述】：

我有一个 Angular JS 网站，我在其中使用来自我想用来动态创建 CSS 类的 API 的数据。然后，这个 CSS 类将格式化 Angular JS 页面中显示的 API 中的其他数据。

例如，有没有一种方法可以在处理 API 数据时在 Controller 中创建 Angular JS $scope 数据，然后在相应的 .html 视图上，使用此 $scope 数据动态创建 CSS 类...顺便说一句，在 HTML 'STYLE' 标签内不能使用 $scope 数据，因为括号字符（'{' 和 '}'）被视为 'STYLE' 字符，所以它不允许 '{{' 和 ' }}' 来扩展 $scope 变量的值。

编辑： 上述 cmets 基于使用 Visual Studio 2013 IDE，其中 Angular 语法在 VS IDE 中显示为错误。使用这种语法（如下 Valentyn 所示）允许 CSS 类定义动态属性并且效果很好。

【问题讨论】：

标签： css angularjs class dynamically-generated

【解决方案1】：

您可以在<style> 中使用{{ 和}}：

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

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

【讨论】：

谢谢...我正在使用 Visual Studio 2013，此语法显示错误，所以我认为它不会起作用。当我使用 $scope 变量运行页面时，效果很好。

【解决方案2】：

您可以尝试使用ng-style：

<element ng-style="function_result() or expression"></element>

【讨论】：