如何使用 ng-style 设置 li:before 的 css

2024-02-04

我想用可变范围(宽度)更改 li:before 的宽度值。

 <ul>
    <li ng-repeat="step in stepsList" ng-style="{li:before { 'width': width;}"
        ng-class="{true: 'active'}[step.active]">
        <span>{{step.stepName | uppercase}}</span>
    </li>
</ul>

我正在执行这段代码,但它不起作用。 请帮助。


不幸的是你不能拥有pseudoelements within inline styling。你可以做的是有两个独立的CSS Classes like

.a:before {}
.b:before {}

这样你就可以使用ngClass https://docs.angularjs.org/api/ng/directive/ngClass将适当的类添加到您的 HTML 中

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

如何使用 ng-style 设置 li:before 的 css 的相关文章

  • Opera 中 margin-bottom 的计算方式不同

    我有一个具有相对位置的 div 和一个具有绝对位置的子 div div class out div div div CSS container width 100px height 100px position relative insid
  • Express JS:请求的资源上不存在“Access-Control-Allow-Origin”标头

    我有一个在服务器上运行的 API 和一个连接到它以检索数据的前端客户端 我对跨域问题做了一些研究并使其发挥作用 但我不确定发生了什么变化 我现在在控制台中收到此错误 XMLHttpRequest 无法加载https api mydomain
  • 如何将查询参数添加到守卫中的路由并将其传递给 Angular 4 中的组件?

    我在我的 Angular 4 应用程序中使用路由保护 如果条件满足并返回 true 我想向路由添加一个查询参数 这是我一直在研究的代码 Injectable export class ViewGuardService implements
  • 如何显示/隐藏jsf组件

    在我的一个 JSF 应用程序中 顶部的标题部分包含 selectOneMenu 底部的内容部分显示过滤器组件 默认情况下 应用程序首先在顶部显示 selectOneMenu 数据 在底部显示相应的 Filter 信息 如果用户选择不同的se
  • 如何检查侧边栏视图是否已经在主干中渲染?

    通常 用户通过主页进入网站 然后我在那里渲染侧边栏视图 接下来 用户单击链接 路由器呈现另一个视图并替换原始内容视图 侧边栏视图不会重新渲染 当用户在子页面上单击刷新时 侧边栏不会呈现 如何检查视图是否存在并且已渲染 划分责任并坚持下去 不
  • 保存下拉列表中的值

    这是我的情况 我有 2 页 一页用于选择值 一页用于编辑与该值关联的数据库相关内容 现在 我对如何将从下拉列表中选择的值保存到 PHP 的变量中一无所知 并且已经进行了相当多的研究 有任何想法吗 HTML
  • 如何获取 Spotify API 的访问令牌?

    我已经研究 Spotify api 和示例源代码几天了 但我仍然不知道如何获取访问令牌来访问用户的播放列表数据 我已经到达了拉起登录窗口 用户登录 然后收到授权码的地步 此时 我尝试做这样的事情 window open https acco
  • 如何在引导程序中制作两个等高的列?

    我有这个代码 HTML div class container fluid div class row div class col md 6 p Line p p Line p p Line p p Line p p Line p p Li
  • 为什么在缩放的 html5 画布中可以看到伪像?

    我见过this https stackoverflow com questions 7615009 disable interpolation when scaling a canvas and this https stackoverfl
  • 带有桌子的嵌套表

    我在应用了表排序器的表中嵌套了表 它在嵌套表中添加了排序标题 但是它们没有对行进行排序 并且抛出了JavaScript错误 我想拥有 嵌套表不可排序 巢表上的排序实际上可以工作 但不是现状 您的第一个选择要容易得多 使嵌套表不可排序 像这样
  • 如何处理 setTimeout() 的多个实例?

    阻止创建 setTimeout 函数的多个实例 在 JavaScript 中 的最推荐 最佳方法是什么 一个例子 伪代码 function mouseClick moveDiv div 0001 mouseX mouseY function
  • 构建两列 html 表单的最佳方法?

    对齐以下内容的最佳方法是什么 我想要 inputTitle左边和右边inputInput在右边 两者之间有错误 CSS crud form width 430px margin 10px solid font family Verdana
  • Ajax 函数在重定向后不保存滚动位置

    正如标题所述 我编写了一个 ajax 函数 该函数应该滚动到用户在重定向之前所在的位置 我写了一个alert对于测试场景 它确实触发了 但滚动不断回到顶部 我在这里做错了什么 JavaScript ajax type GET url Adm
  • jQuery 模板插件:如何创建双向绑定?

    我开始使用 jQuery 模板插件 微软创建的 但现在我面临这个问题 模板用于绑定到对象数组的一堆表单 当我更改其中一个表单上的某些内容时 我希望更新绑定的对象 但我不知道如何自动执行该操作 这是一个简单的例子 现实生活中的模板和对象要复杂
  • 如何使用 Node.js 解析 JSON? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我应该如何使用 Node js 解析 JSON 是否有一些模块可以安全地验证和解析 JSON 你可以简单地使用JSON parse h
  • Intern JS - 如何在链式 Command 方法中使用 Promise.all()?

    我是用 Intern JS 编写测试的新手 并且一直在遵循他们的文档来使用对象接口 https theintern github io intern interface object and 页面对象 https theintern git
  • 如何使 4.X Typescript 项目与旧版本的 Typescript(如 3.X)兼容?

    如何使基于 TS 4 X 构建的软件包与 3 X 兼容 例如 如果我有较新的版本 则使用新功能 否则使用any or unknown或旧版本支持的任何内容 有没有可能使用指令 https www typescriptlang org doc
  • 除非打开开发人员工具,否则 IE8 Javascript 无法运行?

    由于某种原因 在 IE8 中 除非我在打开开发工具的情况下重新加载页面 否则 javascript 不会运行 我关闭开发人员工具并重新加载页面 然后 javascript 停止工作 我没有收到任何错误报告 无论如何它们也没有任何用处 还有其
  • 如何更改数据表中标题单元格的内容?

    我正在使用数据表 http datatables net plugin 在我的可排序列上 我想用按钮替换列文本 但是这样做 oSettings aoColumns i nTh text 我可以检索相应列的文本 但是 oSettings ao
  • 使用 FormData 上传 JavaScript Blob

    我在将 javascript 创建的 blob 上传到我的服务器时遇到问题 基本思想是用户上传图像 在 javascript 中我对图像进行居中裁剪并在传输之前对其进行下采样 图像处理工作正常 但上传本身无法正常工作 这是执行从 canva

随机推荐

  • 在动画或 SlideUp/slideDown 中使用 stop() 时的 jQuery 高度

    我有一个带有隐藏子菜单的菜单 我正在制作子菜单的动画 当我将鼠标悬停在菜单项上时打开 并在鼠标移出时关闭 当用户将鼠标悬停在许多菜单项上时 所有动画都会排队 为了解决排队问题 我在动画之前添加了 stop 这导致了更严重的问题 子菜单的高度
  • 从文件而不是备份“挂载”PostgreSQL 数据库

    我接到一个从 PostgreSQL 数据库中提取数据的项目 我以前没有使用 PostgreSQL 的经验 但我的项目是修复现有代码的错误 因此连接到引擎并获取数据的所有逻辑都已经就位 我遇到的问题是数据库以直接来自源 HDD 的文件夹和文件
  • 如何删除actionscript中字符串的一部分?

    所以我的字符串类似于 BlaBlaBlaDDDaaa2aaa345 我想摆脱它的子字符串 BlaBlaBlaDDD 所以操作的结果将是一个字符串 aaa2aaa345 如何使用动作脚本执行这样的事情 我只想用字符串 替换 http live
  • 无法使用 pymssql 连接到 SQL Server 数据库,但可以使用底层 freetds tsql 连接

    我不知道为什么会收到此错误 并且找不到任何解决方案 我可以使用 freetds tsql 连接到 SQL Server 数据库 但在使用连接时不断收到错误pymssql connect 具体错误是 pymssql OperationalEr
  • 类型错误:无法读取未定义的属性“消息” - Twitter API

    以下是运行 app js 时的输出 当一切正常时 这种情况完全随机发生 绝对没有做任何改变 TypeError Cannot read property message of undefined at home ec2 user envir
  • 颤动键盘完成按钮导致文本字段内容消失

    我的表单中有 2 个文本字段 当我单击第二个文本字段中键盘上的 完成 按钮时 键盘会隐藏 两个文本字段都会变空 当我手动关闭键盘时也会发生同样的情况 然后文本字段的内容也会丢失 看起来每次发生这种情况屏幕都会刷新 为什么会这样呢 overr
  • Android - Matcher.find() 无限

    我已经实现了 AsyncTask 其中用户提供的正则表达式用于匹配巨大的 html 代码数据 然而 由于某些正则表达式包含大量量词 回溯 Matcher find 会变得无限 我尝试过使用可中断字符序列此处提供 当 Matcher find
  • Spring Boot 令牌认证

    我尝试为另一个应用程序登录 Spring Boot 应用程序并使用 Spring Security 生成令牌 我试图实现的目标 用户名和密码发送到 REST 控制器 如果用户名和密码正确 我想生成具有 30 分钟过期时间的令牌并将其发送回用
  • ASP.NET 站点地图,有多重要?

    我的网站已经完成了 至少我是这么想的 我没有站点地图 奇迹般地我错过了站点地图的整个概念 甚至不知道它是一件事 我想我要向我的计算机老师大喊一声 我一直在阅读它 动态生成站点地图似乎相当复杂 我必须这样做 因为我的页面基本上只是一个使用参数
  • WPF:如何创建自定义项目控制面板?

    我想设计一个自定义项目控制面板ListBox 有3个要求 It should have the properties int rows and int columns which would define the matrix of cel
  • 设置 DOWNLOAD_DELAY 时 scrapy CONCURRENT_REQUESTS 被忽略?

    查看 scrapy 统计数据 Crawled X pages at X pages min 在我看来 一旦 例如 DOWNLOAD DELAY 4 5 设置后 请求将变为连续的 无论什么CONCURRENT REQUESTS塞特林群岛 根据
  • 如何读取匿名类型的属性?

    我有一个返回的方法 return new System Web Mvc JsonResult Data new Status OK 我需要编写一个单元测试来验证这一点jsonResult Data status OK 如何读取状态属性 更新
  • couchDB 中的链式映射/归约

    在 couchDB 中 我有一组如下所示的项目 为了示例而简化 id 1 date Jul 1 user user1 id 2 date Jul 2 user user1 id 3 date Jul 3 user user2 etc 我想获
  • 实体框架修改分离对象

    我有一些困惑 源于此http msdn microsoft com en us library vstudio bb896248 v vs 100 aspx http msdn microsoft com en us library vst
  • Laravel 检查用户电子邮件是否已验证

    您好 我想检查用户电子邮件是否仅在控制器中的一个功能中进行验证 我不想在中间件或路径中设置检查 如下所示 public function construct this gt middleware verified 因为控制器可供访客访问 所
  • 没有分支或移位的绝对值,只有加/减和布尔值

    我们在学校为想要自我测试的学生遇到了这个问题 我在这方面花了相当长的时间 但无法弄清楚 AX 寄存器中有 16 位数字 该数字是有符号的 得到它的 绝对值 AX中的数字必须不变 编辑 寄存器数量没有限制 并且 AX 寄存器可以更改 但在函数
  • Azure API应用程序的IP地址以及如何限制IP

    我已经部署了用 Java Servlet 编写的 API 应用程序 我想知道的是 我的 API 应用程序的 IP 地址以及仅允许来自一两个 IP 地址的请求的方式 这意味着我想限制除这些 IP 之外的所有 IP 似乎一旦我在一个地区部署多个
  • Eclipse 上的自动代码完成

    我希望 Eclipse 在我编写一些变量 类名称或关键字时自动向我建议所有可能的选项 就像在 Flash Develop 或 Visual Studio 中一样 是否可以 如果没有 我可以使用哪个 Java IDE 获得这个 I m spe
  • SQL 和唯一的 n 列组合

    Oracle 有没有一种简单的方法来查询 n 个字段的唯一组合 我有非常简单的两场解决方案 CREATE TABLE combinations AS SELECT 1 AS n FROM DUAL UNION ALL SELECT 2 FR
  • 如何使用 ng-style 设置 li:before 的 css

    我想用可变范围 宽度 更改 li before 的宽度值 ul li span step stepName uppercase span li ul 我正在执行这段代码 但它不起作用 请帮助 不幸的是你不能拥有pseudoelements