css - 带有angularjs的动态样式表

Question

我有一个 angularjs 应用程序，它通过 api 获取数据，并用它构建一个网页。

通常我使用 ng-style 来创建动态样式，但现在我必须使用只能在 css 样式表中使用的 nth-of-type 属性(我不能使用单独的样式，因为元素的数量和顺序总是改变)。

我试过这个天真的代码(在 html 页面中):

<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>

但它没有用...显然 angular 没有绑​​定样式标签内的数据(ng-if 属性确实得到了正确的消化)

有人知道如何做到这一点吗？

谢谢!

Answer 1

你应该检查这三个 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

都可以接受函数作为属性，也可以checkout https://docs.angularjs.org/api/ng/directive/ngStyle

在您的情况下，这实际上可能是最好的