:: after的角度n​​g样式

本文介绍了:: after的角度n​​g样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在设计动态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.