基於條件的不同ng類？

Question

如何修改此示例以突出顯示green for > 30，red for < 20和orange for remainder？

$scope.gridOptions = { 
    data: 'myData', 
    rowTemplate: '<div style="height: 100%" ng-class=" 
             {green: row.getProperty(\'age\') < 30}"> 
         <div ng-repeat="col in visibleColumns()" 
          class="ngCell col{{$index}} {{col.cellClass}}"ng-cell> 
         </div> 
        </div>' 
}; 

官方plnkr for the code（並運行它）

Answer 1

使用orange作爲默認類，並有條件地申請其他類，但是在CSS中，綠色和紅色應該橙後聲明，所以它會覆蓋橙色。這應該這樣做：

<div style="height: 100%" 
     ng-class="{ green: row.getProperty(age)>30, 
        red: row.getProperty(age) < 20}" 
     class="orange"> 
</div> 

或使用該不在意CSS排序：

<div style="height: 100%" 
     ng-class="{ green: row.getProperty(age)>30, 
        red: row.getProperty(age) < 20, 
        orange: 20 <= row.getProperty(age) <= 30}" > 
</div>