Angular 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-重复时更改模板中的内容????

Answer 1

所有ng-style确实是添加内联样式。但是你想添加一个伪元素::after。根据MDN：

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

因此推断，你不能使用它们内联，这可悲意味着ng-style不能做你以后的事情。

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

所以

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

大多数病例。但它看起来想要动态设置content的::after。因此，我只能想象两种选择。

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

<hr /> 
{{name}} 

但是，如果你想在该字符串额外的造型创建一个小的指令，作为可重复使用的部件可能是更好的选择。