dynamic stylesheet with angularjs

Question

I have and angularjs application that fetches data via api, and builds a webpage with it.

Usually I use ng-style to create dynamic styling, but now I have to use the nth-of-type attribute that can only be used in a css stylesheet (I cannot use individual styling since the number and order of elements always change).

I have tried this naive code (in 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>

But it didn't work... Apparently angular doesn't bind the data inside the style tag (the ng-if attribute does get digested properly)

Does anyone have any idea how this can be done?

Thanks!

Answer 1

You should checkout those three ng-*

https://docs.angularjs.org/api/ng/directive/ngClass https://docs.angularjs.org/api/ng/directive/ngClassOdd https://docs.angularjs.org/api/ng/directive/ngClassEven

all of them can accept functions as attributes, you can also checkout https://docs.angularjs.org/api/ng/directive/ngStyle

which might be actually the best in your case