ng样式的更改对CSS样式无效

Question

I have a material design grid list with either one or two columns dependend of the screen size. 我有一个材料设计网格列表，其中一或两列取决于屏幕尺寸。 If there is only one column (xs-screens) I want to give every second tile another background-color. 如果只有一列（xs屏幕），我想给每隔一个图块另一种背景色。 In a two column layout the colored tiles should be diagonal, which means every first and fourth tile (in a block of four). 在两列布局中，彩色图块应为对角线，这意味着每个第一个和第四个图块（以四个为一组）。

In HMTL all I do is calling a function within the ng-style attribute of md-grid-tile: ng-style="{{getBackgroundColor($index)}}" 在HMTL中，我要做的就是在md-grid-tile的ng-style属性内调用一个函数： ng-style="{{getBackgroundColor($index)}}"

And in JavaScript the function is: 在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'}";
}

This code is working. 该代码有效。 Even if I change the screen size the function gets called and the ng-style attribute looks just as expected. 即使更改屏幕大小，该函数也会被调用，并且ng-style属性看起来与预期的一样。 But the style attribute doesn't cange anymore. 但是style属性不再可以改变了。 Means the background-color remains like it was calculated in the beginning. 表示背景颜色保持与开始时一样。

Why doesn't the style attribute change the way ng-style does? 为什么style属性不改变ng-style的方式？ Here is also a complete code example: http://plnkr.co/edit/g3mP8gAoKn5ul9SU7rc3?p=preview 这也是一个完整的代码示例： http : //plnkr.co/edit/g3mP8gAoKn5ul9SU7rc3?p=preview

Any help would be appreciated. 任何帮助，将不胜感激。

Answer 1

use 采用

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

and from function return color directly 并从函数直接返回颜色

$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';
}

here is working plunker http://plnkr.co/edit/3sfyHE559O2TkJogmPaW?p=preview 这是工作的朋克http://plnkr.co/edit/3sfyHE559O2TkJogmPaW?p=preview

Answer 2

I would reccomend you to insert global breakpoint classname: 我建议您插入全局断点类名：

$scope.mdMedia = $mdMedia;

and in the body: 在体内：

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

and then styling in css using :nth-child selector: 然后使用：nth-child选择器在CSS中设置样式：

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

ng样式的更改对CSS样式无效

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-08-29 09:12:20

解决方案2
0 2016-08-29 09:08:02

ng样式的更改对CSS样式无效

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-08-29 09:12:20

解决方案2 0 2016-08-29 09:08:02

解决方案1
1 已采纳 2016-08-29 09:12:20

解决方案2
0 2016-08-29 09:08:02