我正在设计一个动态 hr(水平)规则。
在我的样式表中
hr.my-hr:after{
content:'Generic'
}
在我的模板中
<div ng-repeat="name in ['Adam', 'Collin', 'David']">
<hr class="my-hr" ng-style="{'content':name}">
但是使用 ng-repeat 时如何动态更改模板中的内容????
ng-style
所做的只是添加内联样式。但是,您想添加一个伪元素::after
。根据MDN:
您只能在选择器中使用一个伪元素。它必须出现在语句中的简单选择器之后。
所以推断你不能内联使用它们,这可悲地意味着ng-style
不能做你之后的事情。
但是,如果您::after
在样式表中定义,您可以使用ng-class动态添加该样式。
所以
<hr ng-class="{'my-hr': <some condition to evaluate>}" />
大多数情况就足够了。但是,它似乎想要动态设置content
of ::after
。所以为此我只能想象两种选择。
如果您只想简单地添加字符串值,请使用数据绑定
<hr />
{{name}}
但是,如果您想对该字符串进行额外的样式设置,请创建一个小指令作为可重用的小部件可能是更好的选择。