程序员经验分享-hwhale

如何使用 AngularJS 动态创建 CSS 类

2023-12-26

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

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

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


您可以使用{{ and }}代替<style>:

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

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

angularJS

class

dynamicallygenerated

如何使用 AngularJS 动态创建 CSS 类 的相关文章

随机推荐

  • 无法使用 Excel Interop 安排程序

    我用 C NET 开发了一个控制台程序 它使用 Excel Interop 如果我从命令行运行该程序 则该程序在我的开发计算机和 Windows Server 2008 中运行得很好 当我尝试安排任务每天运行时 我收到了这个恼人的互操作错误

  • ARM/neon memcpy 针对*未缓存*内存进行了优化？

    我使用的是基于 Xilinx Zynq 7000 ARM 的 SoC 我正在努力处理 DMA 缓冲区 需要帮助映射 Xilinx ARM SoC Zynq 7000 上的预留 可缓存 DMA 缓冲区 https stackoverflow

  • 通过 using 块使用 Process [重复]

    这个问题在这里已经有答案了 可能的重复 如果我不关闭 C 控制台应用程序中的 System Diagnostics Process 会发生什么情况 https stackoverflow com questions 185314 what

  • 即使 contentSize 大于框架并且在设置内容大小之前添加子视图，scrollView 也不起作用

    void viewDidLoad super viewDidLoad self navigationController navigationBar translucent YES self navigationController nav

  • C++ 计算器跳过 Else 语句

    我正在用 C 制作一个简单的计算器 然而 该程序并没有完全按照应有的方式运行 运行时 trig if 语句执行良好 但是基本算术 else 语句不起作用 我确定代码没有执行 else 语句 并且想知道如何修复它 else 语句中的代码工作正

  • Symfony2：成功登录事件后，执行一组操作

    我需要在用户成功登录后执行一组操作 这包括从数据库加载数据并将其存储在会话中 实现这一点的最佳方法是什么 您可以添加一个监听器security interactive login event 像这样附加你的听众 在此示例中 我还将安全上下文

  • 如何查看上次收到的推送中修改/添加/删除的所有文件？

    命令git show pretty format name status bd61ad98将显示上次提交中修改 添加 删除的所有文件的列表 其中bd61ad98是提交 ID 输出如下所示 trusktr rocketship express

  • 使用 RandomAccessFile 创建文件时出现 java.io.FileNotFoundException

    当我尝试使用 RandomAccessFile 创建文件时遇到 FileNotFoundException RandomAccessFile file new RandomAccessFile test jpg rw 我现在不知道如何解决这

  • qt Creator 调试速度慢

    我正在 Windows 7 64 位上运行基于 Qt 4 7 4 的 Qt Creator 2 3 0 当我从 Qt Creator ctrl r 运行该应用程序时 一切都运行良好 然而 当我调试 F5 时 执行每一行都需要很长时间 有时执

  • 修改ISAPI和CGI扩展

    我的 IIS 服务器有问题 如何使用 C 语言修改 ISAPI 元素 例如 ASP net V4 0 限制为 不允许 我想设置为 允许 如下图所示 我可以使用此代码添加元素 但我无法修改 using System using System

  • JSON - 斜杠不转义

    这是我的 PHP Json 脚本

  • 如何禁用警告数据表警告从行的数据源请求未知参数

    我的数据表中有两行 如下所示 tr td td td td td td tr tr td td tr 这些行对于数据表上的每条记录都会重复 正如您可以想象的那样 我总是收到此错误 并且只需要禁用它 除非您想弄清楚如何使其工作 那么如何禁用警

  • R 包文档：链接到整个包，而不是函数

    我想在我正在开发的一些函数的文档中引用另一个包 整个包 而不仅仅是其中的一个函数 我正在使用 Roxygen2 注释来记录我的包功能 我找不到使用 Roxygen2 创建整个第三方包的链接的方法 要链接到一个包函数 可以这样写 pkg fu

  • TDD：在重构代码的同时破坏所有现有的测试用例

    我已经开始在我的项目中遵循 TDD 但自从我开始 即使读了一些文章 我也很困惑 因为发展速度变慢了 每当我重构代码时 我都需要更改之前编写的现有测试用例 否则它们将开始失败 下面是我最近重构的一个类的例子 public class Sala

  • 如何使用 Javascript 进行替换和追加

    我有一个评论系统 我想在其中实现内联编辑 当有人知道一个好的插件或类似的东西时 请毫不犹豫地给我一个名字 并找到一个 Javascript 片段 它将文本替换为文本区域和文本作为该文本区域的值 但现在我需要向该文本区域添加一个按钮 提交按钮

  • Azure 应用服务 - 同步期间日期时间更改

    我正在开发一个使用 Xamarin Forms 和 Azure 应用服务 包括离线同步 的应用程序 在客户端有这样一段代码 appointment StartDate System DateTime Now 假设约会 开始日期是现在2017

  • 找到点击的li号

    我有一个标准清单 ul li a href blah 1 a li li a href blah 2 a li li a href blah 3 a li li a href blah 4 a li ul 还有我的 jQuery ul li

  • 如何加载和解析 SVG 文档

    背景 有许多与读取和解析 SVG 路径相关的未解答问题 用Java读取svg路径数据的最简单方法 https stackoverflow com questions 21973777 回复 使用 batik svg 解析器解析 svg 文件

  • chrome.notifications.update 无法按预期工作

    我有一些进度通知 我只想更新它 但它从 0 到 1 然后保持在 1 这是我的代码 var notifId uuidv4 var i 0 var notifOptions type progress iconUrl img GS icon p

  • 如何使用 AngularJS 动态创建 CSS 类

    我有一个 Angular JS 网站 我在其中使用来自 API 的数据 我想用它来动态创建 CSS 类 然后 该 CSS 类将格式化来自 API 的其他数据 并显示在 Angular JS 页面中 例如 有没有一种方法可以让 Angular

热门标签