I am facing a challenge with my AngularJS application as it fetches data via an API and dynamically builds a webpage.
Typically, I rely on ng-style for dynamic styling, but now I need to utilize the nth-of-type attribute which can only be applied in a CSS stylesheet (as the number and order of elements are always changing).
I attempted the following code snippet (within the HTML page):
<style ng-if="styles.sc && styles.sc.length==3">
a.mosection:nth-of-type(3n) > div {
background-color: {{styles.sc[0]}} !important;
}
a.mosection:nth-of-type(3n+1) > div {
background-color: {{styles.sc[1]}} !important;
}
a.mosection:nth-of-type(3n+2) > div {
background-color: {{styles.sc[2]}} !important;
}
</style>
Unfortunately, this approach did not yield the desired result. It seems that Angular does not bind the data within the style tag (although the ng-if attribute is properly digested).
If anyone has any insights on how to achieve this, I would greatly appreciate your assistance!
Thank you!