Question

我有一个材质设计网格列表，其中有一列或两列依赖于屏幕尺寸。如果只有一列（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属性看起来就像预期的那样。但风格属性不再适用。意味着背景颜色保持不变，就像它在开始时计算的一样。

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

任何帮助都将不胜感激。

Answer 1

使用

<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

Answer 2

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

$scope.mdMedia = $mdMedia;

并在身体中：

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

然后使用：nth-child selector：

在css中进行样式设置

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

ng风格的变化对CSS样式没有影响

2 个答案: