I am designing a dynamic hr (horizonatal) rule.
In my Style sheet
hr.my-hr:after{
content:'Generic'
}
In my template
<div ng-repeat="name in ['Adam', 'Collin', 'David']">
<hr class="my-hr" ng-style="{'content':name}">
But how do i dynamically change the content in the template when using ng-repeat ????
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.
So inferred from that you can't use them inline, which sadly means ng-style
can't do what your after.
However if your ::after
is defined in a stylesheet you can use ng-class to dynamically add that style.
So
<hr ng-class="{'my-hr': <some condition to evaluate>}" />
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.