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}} 

但是，如果你想在該字符串額外的造型創建一個小的指令，作爲可重複使用的部件可能是更好的選擇。