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>