基于条件的不同ng-classes？

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>