ng样式的变化对CSS样式没有任何影响

我有一个材质设计网格列表，其中包含一个或两个列的屏幕大小依赖列。如果只有一列（xs-screens），我想给每一个tile另一个背景色。在两列布局中，彩色瓷砖应该是对角线的，这意味着每个第一个和第四个瓷砖（以四个块为单位）。ng样式的变化对CSS样式没有任何影响

在HMTL我要做的就是调用函数MD-网格砖的NG-style属性中：ng-style="{{getBackgroundColor($index)}}"

而且在JavaScript的功能是：

$scope.getBackgroundColor = function(index){ 
    if($mdMedia("xs")){ //screen size extra-small 
    if(index % 2 === 0){ 
     return "{'background-color':'lightgray'}"; 
    } 
    } else { 
    if(index % 4 === 0 || index % 4 === 3){ 
     return "{'background-color':'lightgray'}"; 
    } 
    } 
    return "{'background-color':'white'}"; 
}

此代码工作。即使我改变屏幕大小，该函数也会被调用，并且ng样式属性看起来和预期的一样。但是风格属性不再使用。意味着背景颜色仍然像开始时计算的那样。

为什么style属性没有改变ng样式的方式？这里也是一个完整的代码示例：http://plnkr.co/edit/g3mP8gAoKn5ul9SU7rc3?p=preview

任何帮助，将不胜感激。

来源

2016-08-29 Freddy

使用

<md-grid-tile ng-repeat="number in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]" 
     layout-padding 
     ng-style="{'background-color':getBackgroundColor($index)}"> 
     <label>Tile #{{$index}}</label> 
    </md-grid-tile>

和函数返回的颜色直接

$scope.getBackgroundColor = function(index){ 
    if($mdMedia("xs")){ //screen size extra-small 
    if(index % 2 === 0){ 
     return 'red'; 
    } 
    } else { 
    if(index % 4 === 0 || index % 4 === 3){ 
     return 'blue'; 
    } 
    } 
    return 'red'; 
}

这里工作plunker http://plnkr.co/edit/3sfyHE559O2TkJogmPaW?p=preview

来源

2016-08-29 09:12:20

我以为我想这一点，但也许我有另一个错误当时的情况。没关系，你的解决方案可行！非常感谢你。 – Freddy

很高兴帮助快乐编码 –

我会建议你插入全球断点类名：

$scope.mdMedia = $mdMedia;

和身体：第n个孩子选择：

.xs md-grid-tile:nth-child(even) { 
    background: grey; 
}

<body ng-app="myModule" ng-controller="myController" ng-cloak ng-class="{'xs':mdMedia('xs'), 'sm':mdMedia('sm')}">

，然后使用CSS样式

来源

2016-08-29 09:08:02

ng样式的变化对CSS样式没有任何影响

回答

相关问题