用于 ::after 的 Angular ng-style [英] Angular ng-style for ::after

问题描述

我正在设计一个动态的 hr(水平出生)规则.

I am designing a dynamic hr (horizonatal) rule.

在我的样式表中

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

在我的模板中

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

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

But how do i dynamically change the content in the template when using ng-repeat ????

推荐答案

ng-style 所做的就是添加内联样式.但是，您想添加一个伪元素 ::after.根据 MDN:

All ng-style does is add inline styles. However you want to add a psuedo element ::after. According to the MDN:

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

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

因此推断您不能内联使用它们，这很遗憾意味着 ng-style 不能做您想做的事.

So inferred from that you can't use them inline, which sadly means ng-style can't do what your after.

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

However if your ::after is defined in a stylesheet you can use ng-class to dynamically add that style.

所以

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

大多数情况就足够了.但是看起来想要动态设置 ::after 的 content .所以为此我只能想象两种选择.

Most cases that will suffice. However it looks like to want to dynamically set the content of ::after. So for that i can only imagine two options.

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

If you just want to simply add the string value use databinding

<hr />
{{name}}

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

However if you want extra styling on that string create a small directive as a re-usable widget may be the better option.

这篇关于用于 ::after 的 Angular ng-style的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！