问题描述
我正在设计动态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:
因此推断您不能内联使用它们，可悲的是，这意味着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的角度ng样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！