Angular ::after 的 ng 样式

Question

我正在设计动态 hr（水平）规则。

我的风格sheet

hr.my-hr:after{
   content:'Generic'
}

在我的模板中

<div ng-repeat="name in ['Adam', 'Collin', 'David']">
<hr class="my-hr" ng-style="{'content':name}">

但是我如何在使用 ng-repeat 时动态更改模板中的内容？？？？

Answer 1

ng-style 所做的只是添加内联样式。但是你想添加一个伪元素::after。根据 MDN:

You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

由此推断您不能内联使用它们，遗憾的是这意味着 ng-style 无法执行您的后续操作。

但是，如果您的 ::after 是在样式表中定义的，您可以使用 ng-class 动态添加该样式。

所以

<hr ng-class="{'my-hr': <some condition to evaluate>}" />

大多数情况下就足够了。然而，看起来想要动态设置 ::after 的 content。所以为此我只能想象两个选择。

如果您只想简单地添加字符串值，请使用数据绑定

<hr />
{{name}}

但是，如果您想要对该字符串进行额外的样式创建一个小指令作为可重复使用的小部件可能是更好的选择。

Angular ng-style for ::after