角度ng-style for :: after

Question

我正在设计一个动态hr（horizo​​natal）规则。

在我的样式表中

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。根据{{​​3}}：

  

您只能在选择器中使用一个伪元素。它必须出现在语句中的简单选择器之后。

因此可以推断出你不能内联使用它们，这很遗憾地意味着ng-style不能做你想做的事。

但是，如果您在样式表中定义了::after，则可以使用MDN动态添加该样式。

所以

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

大多数情况就足够了。但是，它似乎想要动态设置content的{​​{1}}。因此，我只能想象两种选择。

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

::after

但是，如果你想在该字符串上添加额外的样式，那么创建一个小指令作为可重用的小部件可能是更好的选择。