程序员经验分享-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 类 的相关文章

  • 单击输入字段会触发窗口调整大小

    我有一个带有徽标 菜单和搜索的标题 当我在桌面上时 我会按该顺序显示所有元素 但如果我的窗口宽度小于 980 像素 菜单会隐藏 有一个切换按钮 并且徽标会与nav并附在徽标之后 如果宽度更大 则徽标将再次分离并附加到 DOM 中的旧位置 w

  • 使组合高度等于浏览器窗口的高度

    http featuredfotografer com http featuredfotografer com Codemirror div 与 header div 结合占用的高度超过了浏览器的高度 我怎样才能使它们的总高度达到浏览器窗口

  • 如何在 Bootstrap 列中使用文本溢出？

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot

  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content

  • 如何在没有分页装饰的情况下渲染 ngTable？

    在我的小型 AngularJS 应用程序中 我使用 ngTable 库渲染多个表格 只有一个可以使用分页 其他的内容总是少于一页 每个渲染的 ngTable 似乎都在表格下方添加了 10 25 50 100 选择器 对于我的大多数桌子来说

  • CSS3 box-shadow 用于类似重叠的 div

    我正在尝试用css3来实现这种效果 HTML 代码显然是这样的

  • 将样式添加到 mat-autocomplete 的 mat-option

    我有这个 HTML代码在这里 https stackblitz com edit angular mat autocomplete with selected value vx1uqg file src 2Fapp 2Fautocomple

  • CSS 的波浪形状

    我正在尝试使用 CSS 重新创建此图像 我不需要重复它 这就是我开始的 但它只有一条直线 wave position absolute height 70px width 600px background e0efe3 div div 我认

  • 如何从父类函数访问子类中定义的常量？

    我从 php net 看到这个例子 但 c MY CONST 仅在 5 3

  • 使用 CSS 的平行四边形导航背景

    我正在尝试创建此导航菜单 绿色突出显示是活动页面 灰色是悬停状态 我可以使用以下 CSS 制作平行四边形 ul nav li a text decoration none padding 4px 10px border radius 3px

  • 在 Java 中克隆对象 [3 个问题]

    这样做会调用Asub的clone方法吗 或者Asub深度克隆是否正确 如果没有的话 有没有办法通过这种方法对Asub进行深度克隆呢 abstract class Top extends TopMost protected Object cl

  • CSS 中的像素与像素密度

    我对 HTML 和 CSS 非常陌生 我突然想到 当决定某个东西是 5px 时 比如说 由于像素的物理尺寸取决于密度 所以 5px 在 100 ppi 的屏幕上看起来肯定比在 300 ppi 的屏幕上看起来更大ppi 这是正确的吗 如果是

  • 每 3 秒重复一次动画

    我正在使用 WOW js 和 animate css 现在我正在将 CSS 运行到 Infinite 我想知道如何让我的课程运行 3 秒停止并再次开始到无限 My html img src images fork png class for

  • 如何设置菜单按钮和菜单项的样式

    我尝试更改菜单按钮中的样式 我可以更改菜单按钮样式 但不能更改其菜单项 无论我尝试什么 菜单按钮内的菜单项都保持不变 menu button fx background color black menu button label fx ba

  • AngularJS：初始化指令内的隔离范围

    我创建了一个指令 它接受一些属性并使用这些属性初始化隔离范围 如果未指定属性 则应使用计算值初始化隔离范围 我添加了一个链接函数 用于检查范围并初始化默认值 如果未使用属性设置值 范围已初始化 但如果我设置默认值 那么它稍后会被框架覆盖 一

  • 使用片段时应用程序崩溃

    我正在处理碎片和 我的代码中有一个我找不到的问题 logcat 指向我的一个片段中的这段代码 Override public View onCreateView LayoutInflater inflater ViewGroup conta

  • Python 3：将字符串转换为变量[重复]

    这个问题在这里已经有答案了 我正在从 txt 文件读取文本 并且需要使用我读取的数据之一作为类实例的变量 class Sports def init self players 0 location name self players pla

  • 动态img（或视频）标签根本不加载资源，HTTP请求处于“待处理”状态

    我尝试使用以下方法在 Web 应用程序上加载资源时遇到一些问题img or videoHTML 标签 我在我的应用程序中使用 Angular 并动态设置src的参数img标签 使用ng src src 指示 没有那么多图像和资源需要加载 在

  • 更改文本输入标签中文本的大小？

    我有一个很大的文本输入框 但我无法更改字体大小

  • CSS 是否有不等于选择器？

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

  • 无法使用 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

热门标签