javascript - 基于条件的不同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（并运行它）

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>