基于条件的不同ng类？

【问题标题】：Different ng-classes based on conditional?基于条件的不同ng类？
【发布时间】：2013-05-28 07:32:06
【问题描述】：

如何修改此示例以突出显示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（并运行它）

【问题讨论】：

标签： javascript css validation angularjs conditional

【解决方案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>

【讨论】：

啊，逗号。现在想想就这么简单。谢谢。