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樣式沒有任何影響

回答

相關問題