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

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

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