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

在你的情况下可能实际上是最好的

Answer 2

谢谢！我确实通过使用带有函数的ng-style来解决它

HTML

<div class="widget widget-people" ng-style="{backgroundColor: staggerBgColors('widget', 'widget-people', '#333333')}"></div>
<div class="widget widget-property" ng-style="{backgroundColor: staggerBgColors('widget', 'widget-property', '#24d10f')}"></div>

范围功能

$scope.staggerBgColors = function(elesClass, eleClass, defaultColor){
  if (!$scope.styles || !$scope.styles.sc || $scope.styles.sc.length!=3){
    return defaultColor;
  }else{
    var listItem = $('.'+eleClass);
    var n = $('.'+elesClass).index( listItem ) % 3;
    return '#' + $scope.preview.moment.sc[n];
  }
}

我必须使用jQuery实现css属性“nth-of-type”的相同功能，但它完美地工作！

带有angularjs的动态样式表

2 个答案: