ng-style 的变化对 CSS-Style 没有影响答案

【问题标题】：Changes in ng-style have no effect to CSS-Styleng-style 的变化对 CSS-Style 没有影响
【发布时间】：2017-01-05 04:13:04
【问题描述】：

我有一个材料设计网格列表，其中一列或两列取决于屏幕大小。如果只有一列（xs-screens），我想每隔一个图块赋予另一种背景颜色。在两列布局中，彩色图块应该是对角线，这意味着每个第一个和第四个图块（在四个块中）。

在 HMTL 中，我所做的只是在 md-grid-tile 的 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 属性看起来与预期的一样。但是 style 属性不再变化。表示背景颜色与开始时计算的一样。

为什么 style 属性不会像 ng-style 那样改变？这里还有一个完整的代码示例：http://plnkr.co/edit/g3mP8gAoKn5ul9SU7rc3?p=preview

任何帮助将不胜感激。

【问题讨论】：

标签： javascript css angularjs responsive-design material-design

【解决方案1】：

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

$scope.mdMedia = $mdMedia;

在体内：

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

然后使用 :nth-child 选择器在 css 中设置样式：

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

【讨论】：

【解决方案2】：

使用

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

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

【讨论】：

我以为我试过这个，但也许我当时有另一个错误。没关系，您的解决方案有效！非常感谢。
乐于助人乐于编码